How do I use loaders in Webpack?

How do I use loaders in Webpack?

Loaders in Webpack transform files into modules as they are added to your application. What type of loader are you interested in?

I'm looking to use Babel loader for JavaScript.

To use Babel loader, first install it with npm: npm install --save-dev babel-loader @babel/core @babel/preset-env. Then, configure it in your Webpack config file.

What should I add to my Webpack config?

In your webpack.config.js, add the following rule:

module: {
  rules: [
    {
      test: /\.js$/, // Apply to .js files
      exclude: /node_modules/, // Exclude node_modules
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

Do I need a Babel configuration file?

Yes, it's a good practice to create a .babelrc file to specify your presets and plugins. You can start with:

{
  "presets": ["@babel/preset-env"]
}