情况
当你更新代码后，webpack会监听到并自动刷新浏览器。但是这样你刚才的一些操作记录都会丢失，为了不丢失原来的操作，只是改变页面显示，使用HMR
代码
webpack.config.js
const path = require('path');
const webpack = require('webpack'); // webpack自带的热更新插件
module.exports = {
entry: './src/index.js', // 入口文件
devServer: {
contentBase: './dist', // 根目录，默认同级
open: true, // 自动打开浏览器
port: 8080, // 端口号
hot: true, // 热模块更新
// 即使热模块更新失效，也不刷新浏览器
// hotOnly: true,
},
output: {
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 文件夹
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin(['dist']),
new webpack.HotModuleReplacementPlugin() // 热模块更新插件
]
}
原理
css-loader、vue-loader已经帮我们写了这部分代码，所以不需要手写了，但是如果是HTML，需要自己手动执行下面的代码
if (module.hot) {
module.hot.accept('文件地址', () => {
// 重新执行文件
})
}
