Hot Module Replacement 热模块更新_12

从简单的例子入手，页面生成一个按钮，每次点击按钮偶数项背景色是绿色，开启 webpack-dev-server

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:nth-of-type(odd) {
  background: green;
}

页面点击新增效果 

 如果此时修改 style.css 使得偶数项背景色为黄色，

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

这个时候 webpack-dev-server 发现你代码改变后会帮你重新打包刷新浏览器，页面上之前渲染的东西丢失，那么现在我们想要的效果，只是替换css文件，页面上之前渲染的东西不要变动

修改css文件之后页面效果 

 我们可以借助HMR帮助我们完成想要的效果

webpack.config.js 如下

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
// 需要用到 webpack 的 HotModuleReplacementPlugin 插件
const webpack = require('webpack')

module.exports = {
    mode: "development",
    devtool: 'eval-cheap-module-source-map',
    entry: {
        main: './src/index.js'
    },
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,
        // hotOnly：即便hot功能没有生效，也不让浏览器刷新
        hotOnly: true
    },
    output: {
        ......
    },
    module: {
        ......
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new CleanWebpackPlugin(['dist']),
        // 使用插件
        new webpack.HotModuleReplacementPlugin()
    ]
}

重新启动命令后，点击页面上的新增，此时是黄色的背景色

我们修改 css 文件背景色为绿色，可以看到我们只是 css 文件替换了，浏览器没有刷新，之前页面上渲染的东西还在

对于 js 文件，HMR也可以起到同样的效果，有时需要判断是否开启 HMR