本节我们学习 webpack
的模块热更新,也可以叫做模块热替换。其目的是为了加快用户的开发速度,提高编程体验,方便开发人员在不刷新页面的情况下,就能修改代码,并且直观地在页面上看到变化。这个功能主要用于开发过程中,对于生产环境没有任何帮助。
什么是模块热更新
HMR
全称为 Hot Module Replacement
,中文意思为模块热更新,是 webpack
提供的最有用的功能之一。它允许在运行时替换,添加,删除各种模块,而无需进行完全刷新重新加载整个页面。热更新中的“热”我们可以理解为这个模块正在运行中,热替换就是将正在运行的模块进行替换。
热更新主要可以通过以下几种方式来显著加快发速度:
- 保留在完全重新加载页面时丢失的应用程序的状态。
- 只更新改变的内容,以节省开发时间。
- 调整样式更加快速,几乎等同于就在浏览器调试器中更改样式。
启用热更新
HMR
的启动其实很简单,需要使用到 webpack-dev-server
插件和 HMR
插件。
如果要通过 webpack-dev-server
启动 webpack
的开发环境,可以打开 webpack-dev-server
的热更新开关,例如下面是在 webpack.config.js
配置文件中的演示代码:
module.exports = {
devServer: {
hot: true, // 打开热更新开关
}
}
在 webpack.config.js
中加入 HotModuleReplacementPlugin
插件,因为这个插件是 webpack
自带的,如果可以直接加入:
module.exports = {
plugins: [
webpack.HotModuleReplacementPlugin(