配置 webpack babel-loader 与在 package.json 内配置有什么区别？

Question

你好，请帮助我理解在 .babelrc 中设置 babel 配置与 webpack 加载器选项、与将其插入 package.json 之间的区别。

例如，如果我将预设放在 webpack babel-loader 选项中与 package.json 或单独的 .babelrc 配置文件相比会有什么不同吗？

在 webpack 配置中：

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

在包 json 中：

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

Answer 1

Webpack 配置：

在 webpack.conf.js 中完全配置 babel-loader（没有 .babelrc）。

Webpack 配置 + .babelrc :

启用webpack.conf.js中的babel-loader，让options对象为空。在 .babelrc 中配置选项。 Webpack 将使用带有 .babelrc.

中给定选项的 babel-loader

如果你有 .babelrc，你可以删除 webpack 预设选项，因为 babel-loader 使用 babel，这显然尊重 .babelrc。

Answer 2

使用 .babelrc 优于其他方法。

如果您将设置放在 Webpack 配置中，那么这些设置将仅对 Webpack 可用。

如果您将设置放在 .babelrc 中，那么这些设置将可用于 Webpack 以及任何其他使用 babel 的工具。

（快点赞吧！）

配置 webpack babel-loader 与在 package.json 内配置有什么区别？

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

webpack

package.json

babeljs

babel-loader