十八、Hot Module Replacementの使用------2019-05-14

一、Hot Module Replacementとは何ですか.Hot Module Replacementは中国語でホットモジュール置換と呼ばれ、HMRと略称され、プロジェクトでwebpack-dev-serverを使用する場合、プロジェクトのCSSまたはJSファイルを変更するたびに、webpack-dev-serverはパッケージされたファイルの変化を監視し、ブラウザーをリフレッシュします.しかし、私たちが変更したのはCSSまたはJSのコードだけで、ページ全体を再リフレッシュするつもりはありません.では、webpack-dev-serverのHot Module Replacementモジュールを有効にすることができます.webpack-dev-serverはプロジェクトファイルの変更を監視します.CSSまたはコードが変更された場合、webpack-dev-serverはスタイルファイルを交換したり、対応するJSモジュールを再実行したりすることはできません.
二、HMRの原理:

+ if (module.hot) {
+   module.hot.accept('./print.js', function() {
+     console.log('Accepting the updated printMe module!');
+     printMe();
+   })
+ }
  ：        ：          module.hot  ，     ，   if      ；

module.hot.accept('    ',function (){
));
          ，         ，        ，              ，       ；               ；
   HMR     ，  webpack        （css-loader、less-loader）            ，         HMR     CSS     ，  JS loader     ，           ；

三、HMRの配置

1、
devServer: {
        contentBase: './bundle',
        open: true,
        port: 8081,
        hot: true,
        // hotOnly: true
    },
 webpack     webpack.config.js devServer   ，  hot    ；

2、
 const webpack = require('webpack');
 plugins: [new HtmlWebpackPlugin({
            template: './src/index.html'
        }), 
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()//  HotModuleReplacementPlugin  
    ],
  ， webpack      HotModuleReplacementPlugin()  ；     webpack   ；
3、    ：
     HotModuleReplacementPlugin       hotOnly；