24、webpack优化(9)——热更新

热更新

所谓的热更新指的是对数据变化的局部进行更新，而不进行页面刷新。

热更新配置

1. 在devServer中开启hot配置为true
2. 添加两个webpack的内置插件，分别为new webpack.NamedModulesPlugin()和new webpack.HotModuleReplacementPlugin(),前者用于打印更新的模块路径，告诉我们哪个模块热更新了；后者是热更新插件。

 let path = require('path');
 let webpack = require('webpack');
 let HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = {
  devServer:{
   port:3001,
   open:true,
   contentBase:'./dist',
   hot:true,//启用热更新
  },
  ...
  plugins:[
   new webpack.NamedModulesPlugin(),//打印更新的模块路径，告诉我们哪个模块热更新了
   new webpack.HotModuleReplacementPlugin(),//热更新插件
   new HtmlWebpackPlugin({
    template:'./src/index.html',
    filename:'index.html'
   })
  ]
 }

3. 这个时候，其实还不会热更新。需要在index.js里做一个是否进行热更新的判断

 import str from './resource.js'
 console.log(str);


 if(module.hot){//是否热更新
  module.hot.accept('./resource.js',() => {//如果'./resource.js'热更新了，那么在热更新完成之后可以在回调函数里做一些事情
   console.log('文件更新了');
   let str = require('./resource.js');//不能使用import，因为import只能写在页面顶端
   console.log(str.default);
  })
 }