webpack入门笔记——热替换-CSDN博客

热替换是什么？

热替换（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"]
    }]
}
复制代码