在配置webpack babel-loader和在package.json中配置它有什么区别？

Question

嗨，请帮助我了解在 .babelrc、webpack loader 选项和 package.json 中设置 babel 配置的区别。

例如，如果我将 presets 放在 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"
    ]
  },

- Bob

Answer 1

Webpack配置：

在webpack.conf.js文件中完全配置babel-loader（不需要.babelrc）。

Webpack配置+.babelrc：

在webpack.conf.js文件中启用babel-loader，让选项对象为空。 在.babelrc文件中配置选项。Webpack将使用.babelrc中给定的选项来使用babel-loader。

如果您有.babelrc文件，则可以删除Webpack预设选项，因为babel-loader使用babel，显然会遵守.babelrc文件中的配置。

- Jayavel

---

谢谢，那 package.json 怎么样？它和这有什么关系吗？ - Bob

package.json 提供了一个简单的方法，让人们跟踪他们在应用程序中使用的软件包。在 webpack 设置中，您想要使用 webpack-dev-server 进行一些基本配置，并使用名为 webpack.config.js 的配置文件。希望下面的链接有所帮助：https://www.robinwieruch.de/minimal-react-webpack-babel-setup/ - Jayavel

babel-config 可能会有很多代码，因此将其放入 webpack.config 可能会使后者变得臃肿。 - Vadim

这并没有真正回答问题。我们知道我们可以使用webpack.conf.js或.babelrc。问题是它们之间有什么区别。 - rinogo

Answer 2

使用.babelrc比其他方法更好。

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

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

来源（去投票支持它！）

- rinogo