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

Question

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"
    ]
  },

score 19 · Accepted Answer · answered Jan 28 '18 at 10:57

19

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.

answered Jan 28 '18 at 10:57

Jayavel

3,377
2
21
35

thanks, what about the package.json, how is that related? – Bob Jan 29 '18 at 13:47
package.json provides a simple way for people to keep track of packages they use in their application. In webpack setup,you want to use the webpack-dev-server with some basic configuration and a configuration file called wepback.config.js, Hope, below link helps: https://www.robinwieruch.de/minimal-react-webpack-babel-setup/ – Jayavel Jan 29 '18 at 14:18
1

babel-config may have a lot of code so put it in webpack.config may bloat last one – Vadim Jul 16 '20 at 07:16
This doesn't really answer the question. We know we can use either webpack.conf.js or .babelrc. The question is what the **difference** is. – rinogo Oct 21 '21 at 19:09

score 0 · Answer 2 · answered Oct 21 '21 at 19:14

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!)

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

2 Answers2

Linked