Babel通过Babel Loader运行时行为不一致的相关问题咨询

问题1解答 #

两者的Babel转译行为本身没有差异，你看到的区别不是Babel导致的：

• 单独运行Babel时，仅对你的index.js业务代码做转译，代码里的const、字符串插值、箭头函数都被正确转为ES5语法，所以输出里没有ES6特性。
• 用babel-loader配合Webpack时，Babel同样已经把你的业务代码里的ES6特性全部转译完成，残留的箭头函数是Webpack打包时自行添加的runtime包裹代码（IIFE立即执行函数），这部分代码不属于你的业务代码，不会走babel-loader的转译流程，所以才会留下箭头函数。

问题2解答 #

Webpack的定位确实是模块打包工具，业务代码的转译逻辑是交给loader处理的，但Webpack本身会生成大量runtime辅助代码（比如模块隔离的包裹层、模块导入导出的辅助逻辑等），这部分代码的语法兼容性由Webpack自己控制：

• output.environment 是Webpack原生的配置项，和babel-loader完全无关，作用是声明构建产物要兼容的目标环境特性，Webpack会根据这个配置调整自身生成的runtime代码的语法。
• 你配置arrowFunction: false就是告诉Webpack，它自己生成的所有runtime代码都不能使用箭头函数，要换成ES5的普通函数写法，所以最终产物里就没有箭头函数了。

内容的提问来源于stack exchange，提问作者Pragmateek