CODEWITHSUNDEEP
webpackbabeljspackage.jsonbabel-loader
Bob
Bob

Reputation: 570

Whats the difference when configuring webpack babel-loader vs configuring it within package.json?

Hi please help me understand the differences between setting babel config inside .babelrc vs webpack loader options, vs inserting it in package.json.

For example, Would it make any difference if I put the presets in the webpack babel-loader options vs package.json or a separate .babelrc config file?

In webpack config: 

          {
            test: /\.(js|jsx|mjs)$/,
            loader: require.resolve('babel-loader'),
            options: {
                 "presets": [
                    "react-app"
                  ]
            },
          },

In package json: 

  "babel": {
    "presets": [
      "react-app"
    ]
  },

Upvotes: 18

Views: 7383

Answers (2)

rinogo
rinogo

Reputation: 9163

Using .babelrc is better than other approaches.

If you put your settings in your Webpack config, then those settings will only be available to Webpack.

If you put your settings in .babelrc, then those settings will be available to Webpack as well as any other tools that use babel.

Source (Go upvote it!)

Upvotes: 0

Jayavel
Jayavel

Reputation: 3407

Webpack config :

config the babel-loader completely in webpack.conf.js (no .babelrc).

Webpack config + .babelrc :

Enable the babel-loader in webpack.conf.js, let the options object be empty. Configure the options in a .babelrc. Webpack will use the babel-loader with the options given in .babelrc.

you can remove the webpack presets options if you have a .babelrc, because babel-loader uses babel, which obviously respects the .babelrc.

Upvotes: 19

Related Questions