webpack配置【七】热更新：局部模块刷新

1.在package.json中配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --env development",
    "build": "webpack --env production",
    "lintjs": "eslint app/ webpack.*.js --cache",
    "hmr":"webpack-dev-server"
  },

2.在webpack.config.js中配置

//引入webpack
const webpack =require('webpack')
module.exports={
  devServer:{ 
    host: process.env.HOST, //Defaults to 'localhost
    port: 80,  //Defalut to 8080
    // overlay: true captures only errors
    overlay: {
      errors: true,
      warnings: true,
    },
    //热更新
    hotOnly: true,//HMR
  },
  plugins:[
    //热更新
    new webpack.HotModuleReplacementPlugin(),//HMR --hot
  ],
}

3.在app文件夹下新建一个libarary.js

export default {
    log() {
        console.log('123');
    }
};

4.在app/index.js中修改

import Library from './library';
import component from './component';
import style1 from './style1.css';
import style2 from './style2.css';
import 'react';
document.body.appendChild(component('123456',style1.class1,style2.class1));


// HMR interface
if(module.hot){
  // Capture hot update
  module.hot.accept('./library',()=>{
    console.log('Accepting the updated library module!');
    Library.log();
  });

}

5.运行命令

npm run start

6.修改library中的console.log中的值时，页面会及时看到刷新信息