前言
本文不是webpack入門文章，如果對webpack還不瞭解，請前往題葉的Webpack入門，或者阮老師的Webpack-Demos。
為什麼要使用Webpack
與react一類模組化開發的框架搭配著用比較好。
屬於配置型的構建工具，比較用容易上手，160行程式碼可大致實現gulp400行才能實現的功能。
webpack使用記憶體來對構建內容進行快取，構建過程中會比較快。
第3點我想稍微論述一下，如果看過我之前寫的《如何寫一個webpack外掛（一）》，會發現，webpack會將檔案內容存在compilation這個大的object裡面，方便各種外掛，loader間的呼叫。雖然gulp也用到了流(pipe)這樣的記憶體處理方式，但感覺webpack更進一步。gulp是每一個任務(task)用一個流，而webpack是共享一個流。
簡要回顧Webpack的配置
Webpack的配置主要為了這幾大專案：
entry：js入口原始檔
output：生成檔案
module：進行字串的處理
resolve：檔案路徑的指向
plugins：外掛，比loader更強大，能使用更多webpack的api
常用Loaders介紹
處理樣式，轉成css，如：less-loader, sass-loader
圖片處理，如: url-loader, file-loader。兩個都必須用上。否則超過大小限制的圖片無法生成到目標資料夾中
處理js，將es6或更高階的程式碼轉成es5的程式碼。如：
babel-loader，babel-preset-es2015，babel-preset-react將js模組暴露到全域性，如果expose-loader
常用Plugins介紹
程式碼熱替換, HotModuleReplacementPlugin
生成html檔案，HtmlWebpackPlugin
將css成生檔案，而非內聯，ExtractTextPlugin
報錯但不退出webpack程式，NoErrorsPlugin
程式碼醜化，UglifyJsPlugin，開發過程中不建議開啟
多個 html共用一個js檔案(chunk)，可用CommonsChunkPlugin
清理資料夾，Clean
呼叫模組的別名ProvidePlugin，例如想在js中用$，如果通過webpack載入，需要將$與jQuery對應起來
使用優化
瞭解了以上介紹的Loaders和Plugins之後，基本就可以搭建一整套基於Webpack的構建（不需要gulp與grunt，合圖除外）。下面讓我來介紹一下在使用過程中的一些優化點。
優化點一.如何區分開發及生產環境
在package.json裡面的script設定環境變數，注意mac與windows的設定方式不一樣
"scripts": {
"publish-mac": "export NODE_ENV=prod&&webpack -p --progress --colors",
"publish-win": "set NODE_ENV=prod&&webpack -p --progress --colors"
}在webpack.config.js使用process.env.NODE_ENV進行判斷
優化點二.使用程式碼熱替換
方法一：
1.將程式碼內聯到入口js檔案裡 
2.啟動程式碼熱替換的plugins
方法二：
直接實現一個server.js，啟動伺服器（需要啟動熱替換plugin)，下面是我在業務中用到的一個範例。具體的一些引數可以
var webpack = require('webpack');
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpackDevServer = require('webpack-dev-server');
var config = require("./webpack.config.js");
config.entry.index.unshift("webpack-dev-server/client?http://localhost:9000"); // 將執替換js內聯進去
config.entry.index.unshift("webpack/hot/only-dev-server");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
hot: true,
historyApiFallback: false,
// noInfo: true,
stats: {
colors: true // 用顏色標識
},
proxy: {
"*": "http://localhost:9000" // 用於轉發api資料，但webpack自己提供的並不太好用
},
});
server.listen(9000);方法三：
直接在webpack.config.js上配置。這個辦法最簡單，當然靈活性沒有自己實現一個伺服器好。
優化點三.import react導致檔案變大，編譯速度變慢，乍辦?
如果你想將react分離，不打包到一起，可以使用externals。然後用
<script>單獨將react引入
如果不介意將react打包到一起，請在alias中直接指向react的檔案。可以提高webpack搜尋的速度。準備部署上線時記得將換成react.min，能減少檔案大小(減少約600kb)
優化點四.將模組暴露到全域性
如果想將report資料上報元件放到全域性，有兩種辦法：
方法一：
在loader裡使expose將report暴露到全域性，然後就可以直接使用report進行上報
{
test: path.join(config.path.src, '/js/common/report'),
loader: 'expose?report'
},方法二：
如果想用R直接代表report，除了要用expose loader之外，還需要用ProvidePlugin幫助，指向report，這樣在程式碼中直接用R.tdw， R.monitor這樣就可以
new webpack.ProvidePlugin({
"R": "report",
}),優化點五.多個html怎麼辦
使用HtmlWebpackPlugin，有多少個html，就排列多少個，記得不要用inject，否則全部js都會注入到html。如果真的要用inject模式，請務必將不需要的js用exclude chunk去掉或者用chunk引數填上你需要入口檔案。
僅使用app作為注入的檔案：
plugins: [
new HtmlWebpackPlugin({
chunks: ['app']
})
]不使用dev-helper作為注入檔案：
plugins: [
new HtmlWebpackPlugin({
excludeChunks: ['dev-helper']
})
]如果你不想用inject模式，但又想使用html-webpack-plugin，那你需要在html裡用<script>標籤放入對應的js，以及用<link>入對應的css。記住，這些資源的路徑是在生成目錄下的，寫路徑的時候請寫生成目錄下的相對路徑。
優化點六. html-webpack-plugin不用使inject模式沒又md5，而且不支援檔案內聯怎麼破？
當時我就給維護者提了一個issue--Add inline feature to the plugin。
然後維護者在開發的分支上加了這麼一個特性（證明維護者不想在外掛里加內聯功能了，想讓我來弄）：
事件
允許其它外掛去使用執行事件
html-webpack-plugin-before-html-processing
html-webpack-plugin-after-html-processing
html-webpack-plugin-after-emit
使用辦法：
compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
htmlPluginData.html += 'The magic footer';
callback();
});不過我還是決定自己開發一個了一個外掛
html-res-webpack-plugin，有中英文文件可以參考。其實html-webpack-plugin以js作為入口可能跟webpack的理念更為一致，但其實直接在html上放link和script更加方便直白一些。而且html-webpack-plugin侷限性太多，如果我想在script上加attribute也是比較麻煩的事兒。所以我乾脆開發一個可以允許在html上直接放link和script而且支援內聯及md5的外掛。
但相信我之後也會針對html-webpack-plugin再寫一個內聯及md5的外掛，適配一直在用這個外掛的人。
優化點七.用gulp-webpack速度慢乍辦
上圖是初始化構建30個檔案的用時，一共用了13秒。用了externals優化後，還有100多kb，比用純webpack優化要大50多kb。而且，由於你用的是gulp-webpack，每次有檔案改動，都必須全部重新編譯一次。因此，跟react搭配建議還是不要用gulp-webpack。因為如果你使用webpack的話，即使初次啟動時速度也並不快，但開發過程中，webpack會自動識別，只會重新編譯有修改的檔案，這大大加快了編譯構建速度。
沒辦法，老專案改造，真的要用，乍辦？我提供以下思路
（1）當非js檔案改變的時候，不要去跑js打包的任務
（2）非公共的js發生改變的時候，只執行這個js的打包任務
下圖是優化了之後，在開發過程中非公共檔案修改後的編譯速度。我的娘，純webpack只需要100多200ms。建議還是用webpack吧。
優化點八. 公並公共程式碼
有些類庫如utils, bootstrap之類的可能被多個頁面共享，最好是可以合併成一個js，而非每個js單獨去引用。這樣能夠節省一些空間。這時我們可以用到CommonsChunkPlugin，我們指定好生成檔案的名字，以及想抽取哪些入口js檔案的公共程式碼，webpack就會自動幫我們合併好。
new webpack.optimize.CommonsChunkPlugin({
name: "common",
filename: "js/common.js",
chunks: ['index', 'detail]
}),優化點九. 善用alias。
resolve裡面有一個alias的配置專案，能夠讓開發者指定一些模組的引用路徑。對一些經常要被import或者require的庫，如react,我們最好可以直接指定它們的位置，這樣webpack可以省下不少搜尋硬碟的時間。
優化點十.如果在通過webpack在專案中使用bootstrap, jquery以及fontawesome
這一點對於創業公司來說可能比較有用，它們的初期產品都需要快速上線，用一些比較成熟的UI框架會比較好。
這樣，首先我們需要jquery檔案，並且安裝bootstrap(3.3.5) ,font-awesome(4.4.0),以及imports-loader(0.6.3)。還需要sass-loader(3.1.2)及less-loader(2.5.3)。
然後，在主要入口檔案要這麼引用下面的樣式檔案：
require('bootstrap/less/bootstrap.less');
require('font-awesome/scss/font-awesome.scss');
require('./index.scss');在webpack.config.js的entry專案裡，可以加上這個vendor:
common: ['jquery', 'bootstrap'],在loaders里加入以下loader，將jQuery暴露到全域性:
{
test: path.join(config.path.src, '/libs/jq/jquery-2.1.4.min'),
loader: 'expose?jQuery'
},再新增以下loader，讓webpack幫助複製font檔案
{
test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
loader: 'url-loader?importLoaders=1&limit=1000&name=/fonts/[name].[ext]'
},在plugins裡新增ProvidePlugin，讓$指向jQuery
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),這樣，就可以同時使用jQuery, Bootstrap和Fontawesome了。
webpack會取代gulp嗎
未必，但在開發環境，以及不需要一些功能如合圖的情況下，webpack可以完全取代gulp，至少現在我有三個專案完全用webpack進行開發和部署上線
要取代gulp,還需要不斷髮展它的loader以及plugin生態，至少，完善一下開發者文件啊。
有樣版boilerplate專案嗎
目前有一個還沒有成型的，我先放在這裡，目前可以通過檢視gulpfile.js和webpack.config.js檔案進行學習
steamer_branch_v2。要成為boilerplate還待我花一週時間整理。