Webpack core concepts _Hot Module Replacement thermal module updates

Hot Module Replacement thermal module updates
What is HMR?
We write an example:
in webpack.config.js configure the look parse css file

      {
        test: /\.css/,
        use: [ 'style-loader', 'css-loader', 'postcss-loader']
      },

Then write 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 to the even set the color div

div:nth-of-type(odd) {
  background-color: rgb(14, 185, 128);
}

Web content is click generates an item

if we modify style.css in color, the browser will refresh, we click on the resulting item will be gone, we want to test the color, click on the need to re-generate test, so it is trouble, so we want to change the style of the code, do not refresh the page, just replace the style code, before rendering the page contents do not move, this time we can make use of the function of the HMR.
To use the HMR, you need to do some configuration, in webpack.config.js in:

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 first to introduce a plug-in, because it is webpack own, so the introduction of webpack, and then configure the plugin in new webpack.HotModuleReplacementPlugin()
adding a hotL truemeaning to let webpack-dev-server to open a hot update. hotOnly: true,Even HMR function does not take effect, nor have the browser automatically refresh
after this configuration is complete HTML features webpack in it opened
so HMR can resolve this problem?
1. facilitate debugging css: css file has been modified, but the changes will not affect the corresponding prior js, css only replace the contents of the page will not change the rendering of content js, so do style debugging, then much more convenient
2. module independent of : introducing a plurality of modules, wherein a module is modified, without affecting the other modules

if （module.hot) {    // 如果当前的项目开启了HMR功能,，那么就会执行这个函数
module.hot.accept('./number, () => {       // 这个方法第一个参数接收依赖的文件名字，如果number这个文件发生了变化，就会执行后面的函数
document.body.removeChild(document.getElementById('number'))
number()
})
}

Style file modification, HMR results came out, but the js file and want to achieve the effect of HMR, but also handwritten above code, in fact, the introduction of css code requires the code above, why do not need to write it, because this piece of code in the css-loader has helped us write is completed.
vue is also a function of HMR, but never written the code above, because the internal vue-loader also help us write is completed.
If we introduce more partial file type in the file, for example, some data files, loader inside these files are not built-in effects of HMR, so you encounter such documents still need to manually write such a code of module.hot.accent
Therefore, you should know that, if realized HMR, should write the above code essentially

Tips:
1. webpack-dev-server will help us to package the project, but the resulting file will not pack placed under the dist directory, but on the inside of the computer's memory, so you can effectively improve the speed of packaged let developers more quickly.
2. Change webpack.config.js, to re-run the project
3. If you do not configure hotOnly: true, if HMR problems, then webpack-dev-server will help us refresh your browser, do not want to refresh, and to raise this configuration . new webpack.HotModuleReplacementPlugin () must be configured, or else not HMR does not take effect

官网： DOCUMENTATION—>GUIDES—>Hot Module Replacement
DOCUMENTATION—>API—>Hot Module Replacement HMR的方法