1、热更新WDS (webpack-dev-server)
npm i webpack-dev-server -D
- 不刷新浏览器
- 不输出文件,而是放在内存中
- 使用 webpack内置的plugin插件 HMR –
HotModuleReplacementPlugin
hot
如果热替换失败就会自动回退使用自动刷新,控制台错误信息被清除,hotOnly
不会使用自动刷新- 会影响文件指纹
2、package.json文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch",
"dev": "webpack-dev-server --open" // open参数 构建完自动刷新浏览器
},
3、webpack.config.js文件
mode: 'development',
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist', // 服务基础目录
hot: true, // 热更新
// hotOnly: true
proxy: { // 反向代理跨域
"/api": {
target: "http://localhost:3000",
pathRewrite: {
"^/api": ""
}
}
}
}
4、热更新的原理
启动阶段:
1 => 2 => A => B (初始代码打包)
文件更新:
1 => 2 => 3 => 4 => 5