热替换是什么？

热替换（HMR）,建立在 devServer 之上，开启后浏览器可以自动刷新，它会监听入口文件及其 import 进来的文件是否修改，修改则重新打包（输出到内存，不再生成文件）并使浏览器刷新

安装

//安装本地服务器 cnpm install  webpack-dev-server --save-dev复制代码

配置

webpack.config.js

//引入依赖包const webpack = require('webpack');module.exports={    devServer: {        contentBase: './dist',        hot: true    },        plugins:[        //new webpack.NamedModulesPlugin(),//开发模式下不再需要配置，默认开启        new webpack.HotModuleReplacementPlugin()    ]}复制代码

package.json

"scripts": {    "start": "webpack-dev-server --open"}复制代码

运行

npm start复制代码

注意事项

热替换只监听入口文件和相关文件，所以想实现css修改后也自动刷新页面，必须使用 css-loader file-loader，让css也被关联上

1 . 安装

cnpm install style-loader css-loader --save-dev复制代码

2 . 配置

module: {    rules: [{        test: /\.css$/,        use:["style-loader","css-loader"]    }]}复制代码