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 在最终打包压缩过的代码里是找不到的。

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

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