Webpack + gulp + babel-loader 配置踩坑

内容简介：Webpack + gulp + babel-loader 配置踩坑

最近新启了一个项目，由于之前没有从零新建过项目，在项目的配置上花了很长时间。简单记录下配置中遇到的最大的坑：webpack + gulp + babel-loader 的问题。

先说一下配置的需求，整个项目工作流主要用 gulp 管理。引入 webpack 只用来打包压缩 js。

很早以前就听过 Webpack 2 有 Tree Shaking 的功能，配合 ES6 的 export 和 import 语法，可以只引入使用的模块，减少最终压缩后的代码量。于是各种看文档、google 配置示例，终于把 gulp + webpack 2 配置了起来。试着用 import 引入一段公共代码，发现也正常引入打包正常工作了，开心的觉得 Voila，搞定！^_^

然鹅，还是 too young too simple..

下午同事把项目配置到本地，捣鼓了一会儿过来问我，为什么只 import 了公共代码（utils.js）里的一个 module, 但还是把整个文件都打包了呢？我当时就黑人问号脸：纳尼，文档上不是写的只打包 import 的 module 吗？文档为什么骗我。。

又认真读了一遍文档，发现没有需要配置的地方啊，Tree shaking 是默认功能。百思不得其解的时候，只能使用 google 大法，把自己使用的工作流 工具 名 webpack + gulp 全输进去，再加一个 tree shaking not working... 画美不看.. 果然，早已经有大神遇到相同问题。

原来是 webpack 使用的 babel-loader 造成的问题。具体原因说白了就是，babel-loader 将 ES6 的 modules 先转换成了 CommonJS modules, 再交给 webpack 去打包。而 CommonJs modules 是动态的，webpack 不能在打包的时候 shake 掉无用的代码。

好吧，虽然还不明白什么是动态 module 什么是静态 module，但是找到问题所在了。 那么怎么解决呢？估计是 Babel 也发现了这个问题，已经提供了一个 配置项 可以关掉 ES6 module 的转换。给 babel-loader 加一项配置：

options: { presets: [ [ 'es2015', { modules: false } ] ] }

重启 webpack 再打包压缩一遍文件，果然~ 只有被 import 的 module 打包了。没有 import 的 module 在最终打包压缩过的代码里是找不到的。

至此，才算大功告成~ 可以开心的继续写代码去了~

附上解决我问题的 文章链接 ，这位大神遇到了跟我一模一样的坑，才决定写一篇文章记录一下。 看到被坑的不只一个人，我就放心了~

以上所述就是小编给大家介绍的《Webpack + gulp + babel-loader 配置踩坑》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• 6、如何获取配置中心的配置
• React降级配置及Ant Design配置
• vscode 配置eslint 开发vue的相关配置
• git commit 规范校验配置和版本发布配置
• hadoop地址配置、内存配置、守护进程设置、环境设置
• 在hibernate中配置事务级别与命名查询配置【原创】

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。