10天掌握webpack 4.0 优化篇 （6）热更新

我们可以配置 热更新 当我们修改代码的时候 会同步更新输出

配置：

在   devServer 配置 hot 为 true

  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    host: 'localhost',
    compress: true,
    port: 8080,
    hot: true
  },

配置热更新插件 

    new webpack.HotModuleReplacementPlugin(),  //热更新插件
    new webpack.NamedModulesPlugin()  //  打印更新的模板路径

测试：

index.js

import str from './source'
console.log(str);
if (module.hot) {
  module.hot.accept("./source.js", () => {
    let str = require('./source')
    console.log(str);
  })
}

　我们在index.js  中 引用了 source.js 当  source.js 更新了代码 index.js 会同步更新

export default 'zxw1'

查看控制台输出：