webpack核心， Hot Module Replacement(热模块替换)

webpackhot.jpg

写在前面

Hot Module Replacement也叫HRM，今天我们就来学习他

准备

在学习Hot Module Replacement之前，我们需要先对我们的配置文件做下面修改，我们在配置一个处理css文件的loader，来满足我们后面的学习

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

上面代码的功能大概就是点击以下按钮新增一个div标签，内容是'item',
我们再写一个样式文件，实现一个偶数下的背景颜色

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

先启动项目看看功能，我们新增几条得到如下效果

page.PNG

这时候我们将样式文件中的yellow改成blue，看看页面的效果，这时候我们会发现页面全部清空了。重新添加元素后才能看到对应的样式，反复几次都是这样的操作，这是因为我们修改代码后会触发webpack的重新打包，页面重新刷新，于是我们就期望有没有一种手段是当我们修改样式文件的时候，就像是我们在控制台中操作一样，当前的页面不会变，但是样式却生效。这时候我们就可以借助HMR

配置

我们无需安装，HMR是webpack自带的一个插件，我么只需要引入并配置就好了。

const webpack = require('webpack')
module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: './dist',
        open: true,
        hot: true,
        hotOnly: true
    },
    plugins: [
        new HtmlWebpackPlugin({
        template: 'src/index.html'
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],

上面的配置需要注意几点

我们需要在devServer中开启HMR功能，即hot: true，意思是我们开启了HMR功能，配套的我们也开启hotOnly: true意为即使是HMR没有生效，我们也不去刷新页面。
我们引入webpack，然后从中引入HotModuleReplacementPlugin并配置。

当然了HMR不一定只适用于样式的热替换，下面我们试一下js开启HMR后的效果
我们先把之前关于HMR的配置注释，先来看看不使用HRM的JS是啥样的。
在src下新建文件'counter.js'文件如下

function counter () {
    var div = document.createElement('div')
    div.setAttribute('id', 'counter')
    div.innerHTML = 1;
    div.onclick = function () {
        div.innerHTML = parseInt(div.innerHTML, 10) + 1
    }
    document.body.appendChild(div)
}
export default counter

在src下再新建number.js的文件如下

function number () {
    var div = document.createElement('div')
    div.setAttribute('id', 'counter')
    div.innerHTML = 1000;
    document.body.appendChild(div)
}
export default number

在index.js中应用并调用

import counter from './counter'
import number from './number'
counter()
number()

这时候的页面是这样的

捕获.PNG

我们点击上面一行，数字会增加，现在我们修改number.js中的1000为其他数值的时候，这时候页面会刷新，第一行也会复位为1。我们期望的是修改别的模块的代码，不要全局影响到页面刷新，只更新变化的模块就够了，这时候，我们再一次需要配置HMR。把刚才配置的HMR打开，重启服务试一下。
你会发现并没有实现所谓的热替换，这里要说明一下，对于JS的热替换，需要我们手动的去写一段代码我们将index.js改成下面这样

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

counter()
number()

if(module.hot) {
    module.hot.accept('./number', () => {
        document.body.removeChild(document.getElementById('number'))
        number()
    })
}

这时候你会发现HMR生效了，这时候疑问来了。

为什么css的HMR不需要上面繁琐的代码，Vue/React中也不需要这样的代码就都可以实现HMR？

有的同学会有上面这样的疑问，其实对于CSS文件其实也是需要这样写才能实现的，只不过这里由css-loader帮我们玩成了，同样的，vue中是通过vue-loader来完成的。react也有babel来实现这样的功能。这里为了给大家演示，这么写一下，实际框架中不需要。但是当我们引入一些比较偏的文件，其loader中并没有配置类似的功能，你依然需要手写上面的代码

写在后面

和前面我们讲解的知识一样，HMR同样是webapck比较核心的概念之一，通过本篇的讲解后，大家可以去官网，更深的去了解他，让你的应用更高效吧！