Javascript 为什么要在网页包配置文件中添加babel加载程序？

我是webpack新手，看到了以下示例：

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

既然webpack自动将es6传输到es5，为什么有必要这样做

---

编辑： 好的，除非得到指示，否则它不会自动传输

既然webpack自动将es6传输到es5，为什么有必要这样做

---

网页包不会自动将ES6传输到ES5。它只是一个构建工具。它只执行你告诉它的插件和加载程序

---

但是，即使没有这个“巴别塔”规则，我编写的es6代码也会被传输到es5

我没有看到它从ES6转换到ES5

我在您的代码中查找的第一个示例是捆绑代码中将

let

转换为

var

，因为这可能是最常用的ES6功能

使用babel loader，

let

转换为

var

（以及其他一些奇特的操作）。如果没有，它仍然是

let

为了探索这一点，我注释掉了UglifyJS，因此包是可读的，并且

ctrl+f

编辑了文件。您应该能够看到相同的行为

如果您希望将

import

转换为

require

，则不会发生这种情况，因为webpack只是读取文件并将其加载到捆绑包中。因此，包中不会出现任何

require

&no

import

。不过，这不是透明化。这只是webpack捆绑过程的一个功能（搜索并将依赖项注入捆绑包）

奖励积分： 我建议将您的

dist

目录添加到

.gitignore

。通常，您不希望捆绑的代码版本受到控制。你应该依靠你的构建工具来处理这个问题（如果你想为你的项目的使用者简化安装，你可以将

webpack

添加到你的

package.json

的

postinstall

）

事后看来，我意识到您可能只是添加了

dist

目录，因为我要求查看捆绑的代码。对不起p但是我会把这个放在这里，以防将来对其他人有帮助

---

Webpack不会自动将ES6传输到ES5，是什么资源导致您得出这样的结论？它只是一个构建工具。它除了执行你告诉它的插件和加载程序外什么都不做。但是我写的es6代码即使没有这个“巴别塔”规则也会被传输到es5…你使用的是什么es6代码被传输到es5？你能分享一些代码，它传输到什么，你的

package.json

中存在哪些与网页包相关的包，以及你在

webpack.config.js

中使用的插件吗？我肯定是有什么东西导致了这一现象。非常感谢你的回复。你可以查我的回购协议。输入文件是，并且是用es6编写的。谢谢！我最终发现，这是因为浏览器支持es6的大部分功能，但不支持将网页包“transpiles”（没有明确的配置，网页包就不能做到这一点）代码转换为es5，所以我的es6代码在浏览器上运行。。。真不敢相信我有多傻；不排除gitignore中的

dist

折叠是我的错误；由于大多数现代浏览器都支持大多数es6功能，如果不考虑较旧的浏览器兼容性，只使用es6代码而不传输到es5可以吗？如果您瞄准的唯一浏览器支持您需要的功能，那么我认为您可以。查看浏览器支持的详细摘要，了解更多详细信息（请确保阅读顶部的图例；颜色有点误导）