## 模块热替换
模块热替换(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。
