(webpack篇)4.模块热替换

概念：模块热替换，即Hot Module Replacement，简称HMR。可通过配置以避免频繁手动刷新浏览器页面，但是不用整个页面刷新，而是局部替换部分模块代码并且使其生效，可以看到代码变更后的效果。所以，HMR既避免了频繁手动刷新页面，也减少了页面刷新时的等待，可以极大地提高前端页面开发效率。

一、开箱即用

说明：在webpack.config.js中配置devServer即可使用

• 1.在webpack.config.js中配置

...
module.exports = {
    mode: 'development',   // 指定构建模式
    ...
    devServer: {
        hot: true,
        open: true, // 启动serve自动会打开页面
        port: 8080, // 端口号
    }
}

• 2.我们在代码中使用案例 说明：删除之前章节代码，然后在webpack.config.js中添加css-loader。项目src目录下添加，保留index.html index.js style.css文件
  a.webpack.config.js中配置读取css文件

...
module.exports = {
    ...
    module: {
        rules: [
        ...
        {
            test: /\.css$/, // .css文件配置
            use: [
                'style-loader',
                'css-loader'
            ]
        }]
    },
    devServer: {
        hot: true,
        open: true,
        port: 8080,
        // hotOnly: true,
        // proxy: {  // 配置代理
        //     '/api': 'http://localhost:3000'
        // }
    }
}

b.在src/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);
}

c.在src/style.css中添加样式

div:nth-of-type(odd) {
    background: red;
}

d.启动项目效果展示 说明：点击"新增"按钮之后，会出现红色背景的内容。

e.下面我们修改src/style.css中背景样式

div:nth-of-type(odd) {
    background: green;
}

说明：这时候我们没有进行任何刷新，页面会自动给我跟新这块内容。
如下图所示

• 3..js代码的热模块更新 说明：写css样式已经可以生成，没任何问题，这时候我们就需要修改js代码也是如此。 PS：未完待续。。。。