webpack设置热更新

Posted 2021-02-06 前端精髓

首先需要在package.json中配置一个脚本参数 --hot 

"dev": "webpack-dev-server --mode development --hot"

 

运行项目 npm run dev 

 

在入口文件还要增加这样的代码

if (module.hot) {
  module.hot.accept()
}

 

如果不想通过脚本参数设置热更新的话，还可以在webpack配置里面配置

  plugins: [
    new htmlWebpackPlugin({
      template: ‘./public/index.html‘
    }),
    // --hot 等于这样的写法
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ],
  devServer: {
    contentBase: ‘./dist‘,
    hot: true
  }