文章目录
- 1. 热更新原理
- 2. 热更新配置
1. 热更新原理
Webpack
的热模块替换(Hot Module Replacement,HMR
)是一种在不完全刷新页面的情况下更新应用代码的技术,从而提高了开发效率。以下是 HMR
的核心原理:
步骤 | 描述 |
---|---|
1 | 开发者使用 webpack-dev-server 启动本地开发服务器,提供静态文件服务并支持 WebSocket 实时通信。 |
2 | webpack-dev-server 构建应用时,在输出的 JavaScript 文件中注入 HMR 运行时代码,处理更新通知。 |
3 | Webpack 配置 watch 模式,监听源代码文件变化,发现变化后开始重新编译。 |
4 | 编译完成,新模块版本生成并存储在内存,启用 HMR 时不刷新页面,准备更新包。 |
5 | 通过 WebSocket 长连接,webpack-dev-server 通知客户端哪些模块有更新。 |
6 | HMR 运行时尝试应用更新,调用模块的 HMR 接口,替换旧模块实例(若支持)。 |
7 | 模块可接受或拒绝更新,有副作用则拒绝并提示手动刷新。 |
8 | 更新失败,Webpack 运行时回滚到之前状态,避免应用崩溃。 |
9 | 对于不支持 HMR 或无法更新的模块,开发者可选择手动刷新页面。 |
2. 热更新配置
启用 webpack
的 模块热替换 特性:
webpack.config.js
module.exports = {//...devServer: {hot: true,},
};
通过命令行使用:
npx webpack serve --hot
如需禁用:
npx webpack serve --no-hot
启用模块热替换功能,在构建失败时不刷新页面作为回退,使用 hot: 'only'
:
webpack.config.js
module.exports = {//...devServer: {hot: 'only',},
};
通过命令行使用:
npx webpack serve --hot only
提示
从webpack-dev-server v4
开始,HMR
是默认启用的。它会自动应用webpack.HotModuleReplacementPlugin
,这是启用HMR
所必需的。因此当hot
设置为true
或者通过CLI
设置--hot
,你不需要在你的webpack.config.js
添加该插件。