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 在最終打包壓縮過的代碼裏是找不到的。

至此，纔算大功告成~ 能夠開心的繼續寫代碼去了~

附上解決我問題的文章連接，這位大神遇到了跟我如出一轍的坑，才決定寫一篇文章記錄一下。 看到被坑的不僅一我的，我就放心了~

博客連接 http://varnull.cn/webpack-gulp-babel-loader-config/