webpack 是一個模組打包器。它的主要目標是將JavaScript檔案打包在一起,打包後的檔案用於在瀏覽器中使用,但它也能夠勝任轉換(transform)、打包(bundle)或包裹(package)，本文主要和大家分享Webpack的一些經驗，希望能幫助大家。
產生檔案名稱 [name].[contenthash:8].js，結合 max-age + cdn 來做快取。
以前是固定的一個html，html - 版本號js 檔案（透過webpack打出來的）-」透過版本號碼決定具體js 。 （現在想想不太合理，雖然沒和後台耦合這麼重）
現在是變動的html，透過HtmlWebpackPlugin 打出來（webpack 生成，裡麵包含版本號的js）
這樣也省了一個串列時間（拉版本號檔）。 同時也方便做灰度，例如發佈了需求，讓一部分使用者先體驗，動態打出 html 給到後台即可。 （固定 html 則沒這麼輕鬆做）
在觀麥，css變動會非常的少，這得益於 react-gm 對類別名稱的完善。 既然變動少，把 css 單獨出來也不錯，使用 ExtractTextPlugin 分離 css。
分離後減少 js 大小，不阻塞 js，同時 css 和 js 可同時拉取。
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
}
}當專案大了後，必然需要打很多包，導致打包時間非常長。 官方推薦做法是把不常變動的文件打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 對 build 的速度大大大提示，可以多執行緒打包，cache 也讓 rebuild 加快。
開發用eval，生產用source-map（用於排查顯示問題，犧牲了打包速度，在可接受範圍內）
記得cacheDirectory
有些函式庫不需要解析的，noParse 設定不解析，同時alias 指向x.min.js 檔案。
沒有用上，感覺還不是時候。有篇文章不錯你的Tree-Shaking並沒有什麼卵用
一開始用的是webpack.optimize.UglifyJsPlugin，那時1.x版本，webpack 是基於uglify-js@2.x。
現在 webpack 單獨出來了, 也多了很多功能，支援 cache ，支援多核心壓縮，我試用了下速度還是挺快的。 webpack.optimize.UglifyJsPlugin 其實是 uglifyjs-webpack-plugin。
令我奇怪的是官方說是基於 uglify-es 。但我看依賴還是 uglify-js。奇怪。
在官方沒出來前用的是 webpack-uglify-parallel , 支持多核心。速度和 uglifyjs-webpack-plugin 差不了多少。
寫文章是翻了下 github，發現7月份的時候開始廢棄了，整合到官方了。
babel 出的 babel-minify-webpack-plugin，保持觀望。
有些js(gm-fetch babel-polyfill) 實在是非常少非常少變動，用webpack 打包有點浪費，可以透過cdn 獲取，script 形式放入html 文件內。
有圖表，非常直覺的分析。我比較喜歡。
webpack-monitor
老牌的是webpack-bundle-analyzer
相關建議：
以上是Webpack的經驗分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
