原文 https://github.com/gmfe/Think/issues/21
由於涉及知識點多，不做具體的介紹，只點出關鍵內容。 對應程式碼在 demo-webpack 可找到。
快取
生成檔名 [name].[contenthash:8].js，結合 max-age + cdn 做快取。
網頁載入
html
以前是固定的一個 html， html -》版本號 js 檔案（通過webpack打出來的）-》通過版本號確定具體 js。（現在想想不太合理，雖然沒和後臺耦合這麼重）
現在是變動的 html，通過 HtmlWebpackPlugin 打出來（webpack 生成，裡面包含版本號的 js）
這樣還省了一個序列時間（拉版本號檔案）。 同時也便於做灰度，比如釋出了需求，讓一部分使用者先體驗，動態打出 html 給到後臺即可。（固定 html 則沒這麼輕鬆做）
css分離
在觀麥，css變動會非常的少，這得益於 react-gm 對類名的完善。 既然變動少，把 css 單獨出來也不錯，使用 ExtractTextPlugin 分離 css。
分離後減少 js 大小，不阻塞 js，同時 css 和 js 可同時拉取。
common
new CommonsChunkPlugin({name: 'commons'})
複製程式碼看打包後的 common 程式碼，會發現其他模組的id和hash都會打在common中，這樣每次 commons 檔案都會變，就很難做快取了。
提供兩個檔案列表即可，會發現 webpack 吧 id 和 hash 打在 manifest 檔案中。這樣commons就可以快取了。btw，沒看到官網有介紹，看到的說聲。
new CommonsChunkPlugin({names: ['commons', 'manifest']})
複製程式碼本地開發
講講代理，本地開始是自己起的服務，沒有後臺服務，自然需要代理到某個地方。 可通過 devServer.proxy 。也可代理到外網排查 bug，都是原始碼，查 bug 非常快。
"proxy": {
"/ticket/*": {
"target": "http://dev.guanmai.cn:7413",
"changeOrigin": true
}
}
複製程式碼打包速度
DllPlugin
當專案大了後，必然需要打很多包，導致打包時間非常長。 官方推薦做法是把不常變動的檔案打DLL。
我們工程就把 react react-dom prop-types classnames mobx mobx-react lodash moment big.js 等打進來。
網上資料都介紹 dll 的 檔名是 [name]_[hash].dll.js, 我們是 [npm version]_dll.js npm version 是 package.json version 讀進來的。
為什麼不用 hash 而是 npm version？我們在思考二次打包的時候遇到了問題，怎麼判斷 dll 是否需要重新打包？如果是 hash 怎麼搞（求推薦方案）。用 npm version 的話只要 version 一改變我們會重新打包，比如升級了 react ，我們就會 version +，就會重新打包。
happypack
happypack 對 build 的速度大大大提示，可以多執行緒打包，cache 也讓 rebuild 加快。
devtool
開發用 eval，生產用 source-map（用於排查顯示問題，犧牲了打包速度，在可接受範圍內）
babel-loader
記得 cacheDirectory
noParse && alias
有些庫不需要解析的，noParse 配置不解析，同時 alias 指向 x.min.js 檔案。
tree shaking
沒有用上，感覺還不是時候。有篇文章不錯 你的Tree-Shaking並沒有什麼卵用
壓縮
UglifyJsPlugin
一開始用的是 webpack.optimize.UglifyJsPlugin，那時 1.x 版本，webpack 基於 uglify-js@2.x。
現在 webpack 單獨出來了, 也多了很多功能，支援 cache ，支援多核壓縮，我試用了下速度還是挺快的。webpack.optimize.UglifyJsPlugin 實際上是 uglifyjs-webpack-plugin。
令我奇怪的是官方說基於 uglify-es 。可我看依賴還是 uglify-js。奇怪。
UglifyJsParallelPlugin
在官方沒出來前用的是 webpack-uglify-parallel , 支援多核。速度和 uglifyjs-webpack-plugin 差不了多少。
寫文章是翻了下 github，發現7月份的時候開始廢棄了，整合到官方了。
其他
babel 出的 babel-minify-webpack-plugin，保持觀望。
指令碼cdn
有些 js(gm-fetch babel-polyfill) 實在是非常少非常少變動，用 webpack 打包有點浪費，可以通過 cdn 獲取，script 形式放入 html 文件內。
分析
有圖表，非常直觀的分析。我比較喜歡。 webpack-monitor