(1) 为什么

开发时修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。所以需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。

(2) 是什么

HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。

(3) 怎么用

? Webpack.config.js

const path = require('path')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
//入口：相对路径和绝对路径都行
entry: './src/main.js',
//输出
output: {
path: undefined, // 开发模式没有输出，不需要指定输出目录
filename: 'static/js/main.js',
// clean:true, // 开发模式没有输出，不需要清空输出结果
},
//加载器
module: {
rules: [
......
]
},
//插件
plugins: [
......
],
//模式
mode:'development', //开发模式
//开发服务器
devServer:{
host:'localhost', // 服务器地址
port: '3000', //端口
open: true, //是否自动开启浏览器
hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）
},
devtool:'cheap-module-source-map'
};

此时 css 样式经过 style-loader 处理，已经具备 HMR 功能了。 但是 js 还不行。

? 处理js

mian.js

import count from './js/count'

import sum from './js/sum'
//引入css资源
import './css/index.css'
//引入less资源
import './less/index.less'
//引入sass/scss资源
import './sass/index.sass'
import './scss/index.scss'
//引入stul资源
import './styl/index.styl'
console.log(count(2,4));
console.log(sum(1,2,3,4,5));
const a = 11
console.log(a);
// 判断是否支持HMR功能
if (module.hot) {
module.hot.accept('./js/count.js',function (count) {
console.log(count(2,4));
});
module.hot.accept('./js/sum.js',function (sum) {
console.log(sum(1,2,3,4,5));
});
}

上面这样写会很麻烦，所以实际开发我们会使用其他 loader 来解决。

比如：vue-loaderopen, react-hot-loader。