原因

在说明什么是热更新之前，我们先说说为什么要使用热更新。

在我们打包之后，甚至使用了webpack-dev-server, 我们会发现，假如，我们在页面中填写了一些数据，然后我们修改了页面的样式，会发现，页面会刷新，填写的数据也会丢失。

所以，热更新的作用就是

  • 保留在完全重新加载页面时丢失的应用程序状态。
  • 只更新变更内容，以节省宝贵的开发时间。
  • 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式

我们可以看下例子：
结构
image.png

  1. {
  2.   "name": "webpack-demo",
  3.   "version": "1.0.0",
  4.   "description": "描述",
  5.   "private": true,
  6.   "scripts": {
  7.     "start": "webpack-dev-server"
  8.   },
  9.   "author": "chenYongRen",
  10.   "license": "ISC",
  11.   "devDependencies": {
  12.     "autoprefixer": "^10.4.7",
  13.     "clean-webpack-plugin": "^4.0.0",
  14.     "css-loader": "^6.7.1",
  15.     "express": "^4.18.1",
  16.     "file-loader": "^6.2.0",
  17.     "html-webpack-plugin": "^5.5.0",
  18.     "node-sass": "^7.0.1",
  19.     "postcss-loader": "^7.0.0",
  20.     "sass-loader": "^13.0.0",
  21.     "style-loader": "^3.3.1",
  22.     "url-loader": "^4.1.1",
  23.     "webpack": "^5.73.0",
  24.     "webpack-cli": "^4.9.2",
  25.     "webpack-dev-middleware": "^5.3.3",
  26.     "webpack-dev-server": "^4.9.3"
  27.   },
  28.   "dependencies": {},
  29.   "browserslist": [
  30.     "> 1%",
  31.     "last 2 versions"
  32.   ]
  33. }
  2. const path = require('path')
  3. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. const { CleanWebpackPlugin } = require("clean-webpack-plugin");
  6. module.exports = {
  7.   mode: 'development',
  8.   devtool: 'eval',
  9.   entry: {
  10.     main: './src/index.js'
  11.   },
  12.   devServer: {
  13.     // 服务器启动在哪个文件夹下
  14.     static: {
  15.       directory: path.join(__dirname, 'dist'),
  16.     },
  17.     // 自动打开浏览器
  18.     open: true,
  19.     // 默认端口号
  20.     port: 8080
  21.   },
  22.   module: {
  23.     rules:[
  24.       {
  25.         test: /\.(jpg|png|gif)$/,
  26.         use:{
  27.           loader: 'url-loader',
  28.           options: {
  29.             name:'[name]_[hash].[ext]',
  30.             outputPath: 'images/',
  31.             limit: 2048 // 2kb
  32.           }
  33.         }
  34.       },
  35.       {
  36.         test: /\.scss$/,
  37.         use:[
  38.           'style-loader', 
  39.           {
  40.             loader:'css-loader',
  41.             options: {
  42.               importLoaders: 2
  43.             }
  44.           },
  45.           'sass-loader',
  46.           'postcss-loader'
  47.         ]
  48.       },
  49.       {
  50.         test: /\.css$/,
  51.         use:[
  52.           'style-loader', 
  53.           'css-loader',
  54.           'postcss-loader'
  55.         ]
  56.       }
  57.     ]
  58.   },
  59.   plugins:[new HtmlWebpackPlugin({
  60.     template: 'src/index.html'
  61.   }), new CleanWebpackPlugin()], 
  62.   output: {
  63.     // 我所有打包生成的文件之间的引用，前面都加根路径
  64.     // 其实一般不加也可以
  65.     publicPath:'/',
  66.     filename: '[name].js',
  67.     path: path.resolve(__dirname, 'dist')
  68.   }
  69. }
  1. import './style.css'
  3. var btn = document.createElement('button');
  4. btn.innerHTML = '新增';
  5. document.body.appendChild(btn);
  7. btn.onclick = function(){
  8.   var div = document.createElement('div');
  9.   div.innerHTML = 'item'
  10.   document.body.appendChild(div)
  11. }
  1. div:nth-of-type(odd){
  2.   background: yellow;
  3. }

效果
image.png
如果现在把style.css的背景改成blue,他会重新刷新。
image.png

💡但是webpack5不存在这个为题，就算不加任何配置，也能实现热更替的功能。 所以下面方法是针对webpack5以下的版本

在 webpack5以下的版本如果遇到页面的样式修改导致整个页面刷新的问题
就要设置热更新的配置，以及插件
hot: true,
hotOnly: true

并且在webpack5中
hotOnly已经废除。
直接使用hot:’only’

然后重启命令就可以生效了

  2. const path = require('path')
  3. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. const { CleanWebpackPlugin } = require("clean-webpack-plugin");
  6. // 引入webpack来使用热更新
  7. const webpack = require('webpack');
  9. module.exports = {
  10.   mode: 'development',
  11.   devtool: 'eval',
  12.   entry: {
  13.     main: './src/index.js'
  14.   },
  15.   devServer: {
  16.     // 服务器启动在哪个文件夹下
  17.     static: {
  18.       directory: path.join(__dirname, 'dist'),
  19.     },
  20.     // 自动打开浏览器
  21.     open: true,
  22.     // 默认端口号
  23.     port: 8080,
  24.     // 让webpack devServer开启 hot Module Replacement模式
  25.     hot: true,
  26.     // 即便hmr的功能没有生效，也不让浏览器自动重新刷新
  27.     hotOnly: true
  28.   },
  29.   module: {
  30.     rules:[
  31.       {
  32.         test: /\.(jpg|png|gif)$/,
  33.         use:{
  34.           loader: 'url-loader',
  35.           options: {
  36.             name:'[name]_[hash].[ext]',
  37.             outputPath: 'images/',
  38.             limit: 2048 // 2kb
  39.           }
  40.         }
  41.       },
  42.       {
  43.         test: /\.scss$/,
  44.         use:[
  45.           'style-loader', 
  46.           {
  47.             loader:'css-loader',
  48.             options: {
  49.               importLoaders: 2
  50.             }
  51.           },
  52.           'sass-loader',
  53.           'postcss-loader'
  54.         ]
  55.       },
  56.       {
  57.         test: /\.css$/,
  58.         use:[
  59.           'style-loader', 
  60.           'css-loader',
  61.           'postcss-loader'
  62.         ]
  63.       }
  64.     ]
  65.   },
  66.   plugins:[new HtmlWebpackPlugin({
  67.     template: 'src/index.html'
  68.   }), new CleanWebpackPlugin(),
  69.     // 热更新插件
  70.     new webpack.HotModuleReplacementPlugin()
  71.  ], 
  72.   output: {
  73.     // 我所有打包生成的文件之间的引用，前面都加根路径
  74.     // 其实一般不加也可以
  75.     publicPath:'/',
  76.     filename: '[name].js',
  77.     path: path.resolve(__dirname, 'dist'),
  78.   }
  79. }

但要说明一点，就是这里的是针对css样式修改，不会改js渲染出来的内容。

接下来我们再看看下面的例子
image.png
我们先把热更新关掉

  2. const path = require('path')
  3. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. const { CleanWebpackPlugin } = require("clean-webpack-plugin");
  6. // 引入webpack来使用热更新
  7. const webpack = require('webpack');
  9. module.exports = {
  10.   mode: 'development',
  11.   devtool: 'eval',
  12.   entry: {
  13.     main: './src/index.js'
  14.   },
  15.   devServer: {
  16.     // 服务器启动在哪个文件夹下
  17.     static: {
  18.       directory: path.join(__dirname, 'dist'),
  19.     },
  20.     // 自动打开浏览器
  21.     open: true,
  22.     // 默认端口号
  23.     port: 8080,
  24.     // 让webpack devServer开启 hot Module Replacement模式
  25.     // hot: 'only'
  26.   },
  27.   module: {
  28.     rules:[
  29.       {
  30.         test: /\.(jpg|png|gif)$/,
  31.         use:{
  32.           loader: 'url-loader',
  33.           options: {
  34.             name:'[name]_[hash].[ext]',
  35.             outputPath: 'images/',
  36.             limit: 2048 // 2kb
  37.           }
  38.         }
  39.       },
  40.       {
  41.         test: /\.scss$/,
  42.         use:[
  43.           'style-loader', 
  44.           {
  45.             loader:'css-loader',
  46.             options: {
  47.               importLoaders: 2
  48.             }
  49.           },
  50.           'sass-loader',
  51.           'postcss-loader'
  52.         ]
  53.       },
  54.       {
  55.         test: /\.css$/,
  56.         use:[
  57.           'style-loader', 
  58.           'css-loader',
  59.           'postcss-loader'
  60.         ]
  61.       }
  62.     ]
  63.   },
  64.   plugins:[new HtmlWebpackPlugin({
  65.     template: 'src/index.html'
  66.   }), new CleanWebpackPlugin(),
  67.     // 热更新插件
  68.     // new webpack.HotModuleReplacementPlugin()
  69.  ], 
  70.   output: {
  71.     // 我所有打包生成的文件之间的引用，前面都加根路径
  72.     // 其实一般不加也可以
  73.     publicPath:'/',
  74.     filename: '[name].js',
  75.     path: path.resolve(__dirname, 'dist'),
  76.   }
  77. }
  1. function counter(){
  2.   var div = document.createElement('div')
  3.   div.setAttribute('id','counter')
  4.   div.innerHTML = 1;
  5.   div.onclick = function(){
  6.     div.innerHTML = parseInt(div.innerHTML, 10) + 1
  7.   }
  8.   document.body.appendChild(div)
  9. }
  11. export default counter;
  1. function number(){
  2.   var div = document.createElement('div')
  3.   div.setAttribute('id','number')
  4.   div.innerHTML = 1000;
  5.   document.body.appendChild(div)
  6. }
  8. export default number;
  1. // import './style.css'
  3. // var btn = document.createElement('button');
  4. // btn.innerHTML = '新增';
  5. // document.body.appendChild(btn);
  7. // btn.onclick = function(){
  8. //   var div = document.createElement('div');
  9. //   div.innerHTML = 'item'
  10. //   document.body.appendChild(div)
  11. // }
  13. import counter from './counter'
  14. import number from './number'
  16. counter();
  17. number();

点击上面的数字会递增，但是如果这是我们修改number.js的数字
image.png
会直接清掉上面的数据
image.png

然后我们试试把热更新启动

  2. const path = require('path')
  3. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. const { CleanWebpackPlugin } = require("clean-webpack-plugin");
  6. // 引入webpack来使用热更新
  7. const webpack = require('webpack');
  9. module.exports = {
  10.   mode: 'development',
  11.   devtool: 'eval',
  12.   entry: {
  13.     main: './src/index.js'
  14.   },
  15.   devServer: {
  16.     // 服务器启动在哪个文件夹下
  17.     static: {
  18.       directory: path.join(__dirname, 'dist'),
  19.     },
  20.     // 自动打开浏览器
  21.     open: true,
  22.     // 默认端口号
  23.     port: 8080,
  24.     // 让webpack devServer开启 hot Module Replacement模式
  25.     hot: 'only'
  26.   },
  27.   module: {
  28.     rules:[
  29.       {
  30.         test: /\.(jpg|png|gif)$/,
  31.         use:{
  32.           loader: 'url-loader',
  33.           options: {
  34.             name:'[name]_[hash].[ext]',
  35.             outputPath: 'images/',
  36.             limit: 2048 // 2kb
  37.           }
  38.         }
  39.       },
  40.       {
  41.         test: /\.scss$/,
  42.         use:[
  43.           'style-loader', 
  44.           {
  45.             loader:'css-loader',
  46.             options: {
  47.               importLoaders: 2
  48.             }
  49.           },
  50.           'sass-loader',
  51.           'postcss-loader'
  52.         ]
  53.       },
  54.       {
  55.         test: /\.css$/,
  56.         use:[
  57.           'style-loader', 
  58.           'css-loader',
  59.           'postcss-loader'
  60.         ]
  61.       }
  62.     ]
  63.   },
  64.   plugins:[new HtmlWebpackPlugin({
  65.     template: 'src/index.html'
  66.   }), new CleanWebpackPlugin(),
  67.     // 热更新插件
  68.     new webpack.HotModuleReplacementPlugin()
  69.  ], 
  70.   output: {
  71.     // 我所有打包生成的文件之间的引用，前面都加根路径
  72.     // 其实一般不加也可以
  73.     publicPath:'/',
  74.     filename: '[name].js',
  75.     path: path.resolve(__dirname, 'dist'),
  76.   }
  77. }

我们可以发现，他虽然没有刷新，但是它也没有改变
image.png

如何解决这个问题。
这就需要module.hot来完成。

// import './style.css'

// var btn = document.createElement('button');
// btn.innerHTML = '新增';
// document.body.appendChild(btn);

// btn.onclick = function(){
//   var div = document.createElement('div');
//   div.innerHTML = 'item'
//   document.body.appendChild(div)
// }

import counter from './counter'
import number from './number'

counter();
number();

// 如果启动了热模块
if(module.hot){
  // 如果number这个文件发生变化，就会执行后面的函数
  module.hot.accept('./number', ()=>{
    number();
  })
}

image.png

image.png
当然这个写法只是给我们了解module.hot.accept的作用。
这样就没问题了

// import './style.css'

// var btn = document.createElement('button');
// btn.innerHTML = '新增';
// document.body.appendChild(btn);

// btn.onclick = function(){
//   var div = document.createElement('div');
//   div.innerHTML = 'item'
//   document.body.appendChild(div)
// }

import counter from './counter'
import number from './number'

counter();
number();

// 如果启动了热模块
if(module.hot){
  // 如果number这个文件发生变化，就会执行后面的函数
  module.hot.accept('./number', ()=>{
    document.body.removeChild(document.getElementById('number'))
    number();
  })
}

而且功能也实现了
image.png

我们这里的时候其实就可以发现，style样式修改我们只需要配置一下热模块就可以了，
但是为什么修改js文件的时候还要使用module.hot.accept这样的代码呢。

原因很简单：
因为module.hot.accept这样的代码，在css-loader里面它已经帮你编写好了，其实就是css-loader底层帮我们实现了这样的代码。

类似vue也是。

但是如果我们的项目之中，遇到比较偏的文件类型，比如数据文件，他们的loader里面并没有这样的内置效果时，就需要我们这样写。

参考

模块热替换
模块热替换配置
hmr底层原理