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

Answer 1

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.