为什么在webpack conf文件中添加babel-loader？

Question

我是webpack的新手，见过以下一些例子：

module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      // ....

为什么这是必要的，因为webpack自动将es6转换为es5？

编辑： 好的，除非得到指示，否则它不会自动转换。

Answer 1

  

为什么这是必要的，因为webpack自动将es6转换为es5？

Webpack不会自动将ES6转换为ES5。它只是一个构建工具。除了执行插件外，它什么都不做。你告诉它的装载机。

  

但是我编写的es6代码被转换为es5，即使没有这个＆＃34; babel＆＃34;规则

我没有看到它将ES6转换为ES5。

我在代码中查找的第一个示例是捆绑代码中let到var的转换，因为这可能是最常用的ES6功能。

使用babel-loader，let转换为var（和其他一些奇特的机动）。没有，它仍然是let。

为了探索这一点，我评论了UglifyJS，因此捆绑包是可读的，ctrl+f编辑了该文件。你应该能够看到同样的行为。

如果您希望将import转换为require，则不会发生这种情况，因为webpack只是读取文件并将其加载到捆绑包中。所以，没有require＆amp;捆绑中不显示import。但是，这并非如此。它只是webpack的捆绑过程如何工作（搜索和注入依赖关系到捆绑包中）的函数。

奖励积分：

我建议您将dist目录添加到.gitignore。通常，您不希望控制捆绑代码版本。您应该依靠构建工具来处理此问题（如果您希望简化项目使用者的安装，可以将webpack添加到package.json postinstall。

  

事后看来，我意识到你可能只添加了dist目录，因为我要求查看捆绑的代码。抱歉! ：p但是我会把它留在这里以防将来帮助其他人。