Webpack-dev-server結合後端伺服器的熱替換配置

Webpack是一個模組載入器，這裡所謂模組其實就是專案中用到javascript、coffeescript、css、less、jsx以及圖片等等資源，Webpack採用不同的loader將這些資源載入後打包，然後輸出打包後的檔案，打包後的檔案可以是一個或多個js檔案，也可以根據需要分別打包，比如將所有css檔案單獨輸出。下圖可以比較直觀的說明webpack是做什麼的。

更多資訊可以參考webpack的 

Webpack有一個很實用的功能叫做熱替換（Hot-replace），尤其是結合React Hot Loader外掛，開發過程中都不需要重新整理瀏覽器，任何前端程式碼的更改都會實時的在瀏覽器中表現出來。

首先需要安裝Webpack-dev-server,一個輕量的node.js express伺服器。

npm install webpack-dev-server --save-dev

Webpack-dev-server十分小巧，這裡的作用是用來伺服資原始檔，不能替代後端的伺服器，因此如果你還要進行後端開發，就要採用雙伺服器模式：一個後端伺服器和一個資源伺服器（即Webpack-dev-server)

配置雙伺服器熱替換模式首先需要修改Wepack.config.js的entry條目

entry: [
    'webpack-dev-server/client?',//資源伺服器地址
    'webpack/hot/only-dev-server',
    './static/js/entry.coffee'
]

注意，由於要結合了後端伺服器，因此不採用
entry: {
    app: ['webpack/hot/dev-server', './app/main.js']
}
這種形式。

接下來修改output條目,將publicPath設定為webpack-dev-server伺服器下資源目錄的絕對路徑

output: {
    publicPath: "",
    path: './static/dist/',
    filename: "bundle.js"
}

在Plugins中增加

new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"development"'
}),
new webpack.HotModuleReplacementPlugin()

webpack變數需要在Webpack.config.js的開始處宣告

var webpack = require('webpack');

接著中頁面檔案中插入打包後的資原始檔，注意這裡要採用資源伺服器的絕對路徑

雙伺服器的原理其實就是讓後端伺服器伺服的頁面載入資源服務伺服的資源。

如果要實現react的熱載入，還需要 ，

npm install react-hot-loader --save-dev

然後將react-hot loader放在jsx檔案loader鏈的第一位

{ test: /.jsx?$/, loaders: ['react-hot', 'jsx?harmony'], include: path.join(__dirname, 'src') }

最後就是啟動Webpack-dev-server伺服器，注意這裡要採用inline模式， 如果採用hot模式會出現錯誤。--content-base 為資原始檔夾。另外如果你想用另一臺電腦做除錯，需要增加--host引數為開發伺服器的IP地址，因為預設只能透過localhost進行方式。如果IP地址經常變動，可以寫一個指令碼方便每次啟動伺服器

#!/bin/sh

ip=`awk '/inet / && $2 != "127.0.0.1"{print $2}'

node webpack-dev-server.js --port 9090 --inline --host $ip --content-base static/dist/

當資原始檔修改時，webpack-dev-server將透過socket.io通知客戶端更新．

作者：Bing573
連結：