webpack学习（七）：启用 HMR(模块热替换)

拼搏现实的明天。 2022-04-06 15:10 338阅读 0赞

**demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-demo]**  
上次使用 webpack-dev-serve : [https://blog.csdn.net/qq593249106/article/details/84922572][https_blog.csdn.net_qq593249106_article_details_84922572]

**当前目录结构 :**

**webpack.config.js**

这里把配置的 入口文件 print.js 给去掉了, 因为 print.js 被 入口文件 index.js 应用了

## HMR(模块热替换) ##

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一, 它允许在运行时更新各种模块, 而无需进行完全刷新  
比如在这个现在修改 print.js 里面的内容, 使用 HMR 就可以只更新 print.js 里面的内容而不用重新加在整个页面

## 启用HMR ##

启用这个功能很简答, 只需要修改一下 webpack.config.js 的配置, 使用 webpack 内置的 HMR 插件就可以了  
**webpack.config.js**

启用 webpack 内置的 HMR插件后, module.hot 接口就会暴露在 index.js 中, 接下来需要在 index.js 中配置告诉 webpack 接受HMR的模块( print.js ):  
**index.js**

import _ from 'lodash';
    import printMe from './print.js';
    
    function component() { 
        var element = document.createElement('div');
        var btn = document.createElement('button'); //新建一个button对象
    
        element.innerHTML = _.join(['Hello', 'webpack'], ' '); //要用到lodash的语法
    
        btn.innerHTML = 'Click me and check the console!';
        btn.onclick = printMe; //button触发的事件是引用的print.js暴露的事件
    
        element.appendChild(btn); //把button对象插入div中
    
        return element;
    }
    
    document.body.appendChild(component());
    
    if (module.hot) { 
        module.hot.accept('./print.js', function() {  //告诉 webpack 接受热替换的模块
            console.log('Accepting the updated printMe module!');
            printMe();
        })
    }

## 启动 webpack-dev-server ##

终端输入 npm run dev 启动, 打开 index.html, 然后去修改 print.js 里面的内容:  
**print.js**

export default function printMe() { 
        //console.log('I get called from print.js!');
        console.log('change');
    }

回到网页看控制台:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]  
可以看到 HMR 的字眼, 并且看到了 index.js下的输出(‘Accepting the updated printMe module!’) 和 print.js 修改后的输出(‘change’), 说明服务器检测到了 print.js 的代码变化并且执行了 module.hot.accept 的回调函数,

**但是现在只成功了50%, 因为点击 button 按钮, 会发现输出还是之前的(‘I get called from print.js!’), 说明 print.js 虽然被修改了, 但在 index.js 上还没有被修改之后的替换, 所以 button 绑定的还是之前的事件, 这里需要在检测到代码修改后, 用修改之后的js重新渲染页面:**  
**index.js**

import _ from 'lodash';
    import printMe from './print.js';
    
    function component() { 
        var element = document.createElement('div');
        var btn = document.createElement('button'); //新建一个button对象
    
        element.innerHTML = _.join(['Hello', 'webpack'], ' '); //要用到lodash的语法
    
        btn.innerHTML = 'Click me and check the console!';
        btn.onclick = printMe; //button触发的事件是引用的print.js暴露的事件
    
        element.appendChild(btn); //把button对象插入div中
    
        return element;
    }
    
    var element = component(); //改用一个element保存一下
    document.body.appendChild(element);
    
    if (module.hot) {  //告诉 webpack 接受热替换的模块
        module.hot.accept('./print.js', function() { 
            console.log('Accepting the updated printMe module!');
            document.body.removeChild(element); //删掉旧的element
            element = component(); //获得一个修改后的element
            document.body.appendChild(element); //重新插入到网页中
        })
    }

## 热重载 ##

因为之前配置过热重载功能 , 所以修改了 index.js 之后会自动重载, 页面刷新说明重载完成, 这个时候再次修改 print.js 的输出, 热替换后再点击按钮, 发现输出的是修改后的代码:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 1]  
实现了 HMR(模块热替换功能), 这样修改模块的代码就不用热重载重新加载整个文件了, 它只会更新修改的模块部分, 对于开发来说很方便

## HMR 修改样式表(CSS) ##

借助于 style-loader 的帮助, CSS 的模块热替换实际上是相当简单的, 当更新 CSS 依赖模块时, 此 loader 在后台使用 module.hot.accept 来修补(patch) < style> 标签

## 安装 ##

npm install style-loader css-loader --save-dev

## 配置 webpack.config.js ##

**相关 style-loader 配置教程可以看 [https://blog.csdn.net/qq593249106/article/details/84894989][https_blog.csdn.net_qq593249106_article_details_84894989]**  
**webpack.config.js**

现在新建一个 style.css 在 src 文件夹下用来做本次测试:

**style.css**

body { 
        background-color: red;
    }

别忘了在 index.js 引入 style.css:  
**index.js**

import _ from 'lodash';
    import printMe from './print.js';
    import './style.css'
    
    function component() { 
        var element = document.createElement('div');
        var btn = document.createElement('button'); //新建一个button对象
    
        element.innerHTML = _.join(['Hello', 'webpack'], ' '); //要用到lodash的语法
    
        btn.innerHTML = 'Click me and check the console!';
        btn.onclick = printMe; //button触发的事件是引用的print.js暴露的事件
    
        element.appendChild(btn); //把button对象插入div中
    
        return element;
    }
    
    var element = component(); //改用一个element保存一下
    document.body.appendChild(element);
    
    if (module.hot) {  //告诉 webpack 接受热替换的模块
        module.hot.accept('./print.js', function() { 
            console.log('Accepting the updated printMe module!');
            document.body.removeChild(element); //删掉旧的element
            element = component(); //获得一个修改后的element
            document.body.appendChild(element); //重新插入到网页中
        })
    }

## 启动服务器 ##

终端输入 npm run dev, 打开网页:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 2]  
style.css 文件生效了, 现在修改一下在 style.css 中修改一下, 将颜色改为绿色:  
**style.css**

body { 
        /*background-color: red;*/
        background-color: green;
    }

这时, 网页没有重载直接变成了绿色, 实现了 css 的 HMR(热替换)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 3]

[https_github.com_Lkkkkkkg_webpack-demo]: https://github.com/Lkkkkkkg/webpack-demo
[https_blog.csdn.net_qq593249106_article_details_84922572]: https://blog.csdn.net/qq593249106/article/details/84922572
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]: /images/20220406/f0db954d6d144760b211b1e08b98b7f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 1]: /images/20220406/5242bc4c6c5d4506b0eebe2322c5d2ad.png
[https_blog.csdn.net_qq593249106_article_details_84894989]: https://blog.csdn.net/qq593249106/article/details/84894989
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 2]: /images/20220406/1a0de24872b844eb8d7eb5a9ae689d4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 3]: /images/20220406/f0f7368e21c84abc97899b23293ac1b2.png