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

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

如果我们修改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.模块之间独立：引入多个模块，修改其中一个模块，不影响另外一个模块

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的方法