webpack与babel关系与区别

Posted 2023-04-05

参考技术A .babelrc / babel.config.js

webpack.config.js （ module.rules 允许你在 webpack 配置中指定多个 loader）

参考 webpack，Babel，babel-loader的关系

配置 webpack babel-loader 与在 package.json 中配置有啥区别？

【中文标题】配置 webpack babel-loader 与在 package.json 中配置有啥区别？

【英文标题】：Whats the difference when configuring webpack babel-loader vs configuring it within package.json?配置 webpack babel-loader 与在 package.json 中配置有什么区别？

【发布时间】：2018-07-06 16:18:30

【问题描述】：

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

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

在 webpack 配置中：

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

在包json中：

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

【参考方案1】：

Webpack 配置：

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

Webpack 配置 + .babelrc ：

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

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

【讨论】：

谢谢，package.json 呢，有什么关系？

package.json 为人们提供了一种简单的方法来跟踪他们在应用程序中使用的包。在 webpack 设置中，你想使用 webpack-dev-server 和一些基本配置和一个名为 wepback.config.js 的配置文件，希望下面的链接有帮助：robinwieruch.de/minimal-react-webpack-babel-setup

babel-config 可能有很多代码，所以放在 webpack.config 中可能会膨胀到最后一个

这并不能真正回答问题。我们知道我们可以使用 webpack.conf.js 或 .babelrc。问题是区别是什么。

【参考方案2】：

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

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

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

Source（点赞！）