## 模塊熱替換
模塊熱替換(HMR - Hot Module Replacement)功能會在應用程序運行過程中替換、添加或刪除[模塊](https://doc.webpack-china.org/concepts/modules/)，而無需重新加載整個頁面。主要是通過以下幾種方式，來顯著加快開發速度：
- 保留在完全重新加載頁面時丟失的應用程序狀態。
- 只更新變更內容，以節省寶貴的開發時間。
- 調整樣式更加快速 - 幾乎相當于在瀏覽器調試器中更改樣式。
>[warning] **HMR** 不適用于生產環境，這意味著它應當只在開發環境使用。
如果你使用了 `webpack-dev-middleware` 而沒有使用 `webpack-dev-server`，請使用 [`webpack-hot-middleware`](https://github.com/glenjamin/webpack-hot-middleware) package 包，以在你的自定義服務或應用程序上啟用 HMR。
**conf/webpack.config.js** 配置
```js
const path = require('path');
module.exports = {
entry: {
main: './src/main.js'
},
output: {
path: path.resolve(__dirname, '..', 'dist'),
filename: '[name].[hash].js',
},
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, "..", "dist"), // 服務器根目錄
compress: true, // 壓縮
port: 9000, // 監聽端口
open: true, // 直接使用瀏覽器打開
hot: true
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
```
注意，我們還添加了 `NamedModulesPlugin`，以便更容易查看要修補(patch)的依賴。在起步階段，我們將通過在命令行中運行 `npm start` 來啟動并運行 dev server。
