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

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

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