Webpack核心概念_Hot Module Replacement 热模块更新

冷不防 2021-12-10 15:17 323阅读 0赞

**Hot Module Replacement 热模块更新**  
什么是HMR？  
我们写一个例子：  
在webpack.config.js配置一下css文件的解析

{
            test: /\.css/,
            use: [ 'style-loader', 'css-loader', 'postcss-loader']
          },

然后index.js 中写

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)
    }

style.css给偶数div设置颜色

div:nth-of-type(odd) {
      background-color: rgb(14, 185, 128);
    }

网页内容就是点击就会生成一个item  
![在这里插入图片描述][20190711160234302.png]  
如果我们修改style.css中的颜色，浏览器就会刷新，我们点击生成的item就会不见，我们想要测试颜色，需要重新点击生成测试，这样的话就很麻烦，于是我们想改变样式代码的时候，不刷新页面，只是把样式代码替换掉，页面上之前渲染出的内容不要动，这个时候我们就可以借助HMR的功能了。  
要想使用HMR，需要做一些配置，在webpack.config.js中：

const webpack = require('webpack');
      devServer: {
        contentBase: './dist',
        open: true,
        hot: true,
        hotOnly: true,
        host: "0.0.0.0"
      },
        plugins: [
        new HtmlWebpackPlugin({template: 'src/index.html'}),
        new CleanWebpackPlugin (),
        new webpack.HotModuleReplacementPlugin()
      ]

先引入一个webpack插件，因为是webpack自带的，所以引入webpack，然后在plugin中配置`new webpack.HotModuleReplacementPlugin()`  
加一个`hotL true`, 意思是让webpack-dev-server开启一个热更新的功能。`hotOnly: true,`即便是HMR的功能没有生效，也不让浏览器自动的重新刷新  
这样配置完成后webpack中的HTML功能就开启了  
那么HMR功能可以解决什么问题呢？  
**1.方便调试css:** css文件做了修改，但是不会影响之前js对应上的变更，只会替换页面css的内容，不会改js渲染出的内容，这样的话做样式调试的话就方便多了  
**2.模块之间独立**：引入多个模块，修改其中一个模块，不影响另外一个模块  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]

if （module.hot) {    // 如果当前的项目开启了HMR功能,，那么就会执行这个函数
    module.hot.accept('./number, () => {       // 这个方法第一个参数接收依赖的文件名字，如果number这个文件发生了变化，就会执行后面的函数
    document.body.removeChild(document.getElementById('number'))
    number()
    })
    }

样式文件修改，HMR的效果就出来了，但是js文件，想实现HMR的效果，还要手写上面的代码，事实上引入css代码也需要上面的代码，为什么不需要写了呢，因为这一段代码在css-loader中已经帮我们编写完毕了。  
vue中也有HMR功能的，但是从来没有写过上面的代码，因为vue-loader内部也帮助我们编写完毕了。  
如果我们在文件中引入比较偏的文件类型，比如说一些数据文件，这些文件的loader里面并没有内置HMR的效果，所以遇到这种文件还是需要手动的写module.hot.accent的这样的代码  
所以大家要知道，要是实现HMR，本质上都要写上面的代码

**技巧：**  
1.使用webpack-dev-server会帮助我们打包项目，但是打包生成的文件并不会放在dist目录下，而是放在了电脑中的内存里面，这样的话可以有效的提升打包的速度，让开发更快捷。  
2. 改变webpack.config.js，要重新运行项目  
3. 如果不配置hotOnly：true,如果HMR出现问题，那么webpack-dev-server会帮助我们重新刷新浏览器，不想要重新刷新，要加这个配置。 new webpack.HotModuleReplacementPlugin()一定要配置，要不然不会HMR功能不会生效

官网： DOCUMENTATION—>GUIDES—>Hot Module Replacement  
DOCUMENTATION—>API—>Hot Module Replacement HMR的方法

[20190711160234302.png]: /images/20211210/7d772a185c4b42f99bf734765cdd6900.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]: /images/20211210/c29b2274580940729048be205e9b3cef.png