webpack设置热更新

Posted 前端精髓

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack设置热更新相关的知识,希望对你有一定的参考价值。

首先需要在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
  }

 

以上是关于webpack设置热更新的主要内容,如果未能解决你的问题,请参考以下文章

webpack4--热更新

webpack 热更新

在 docker 应用程序中启用 webpack 热重载

使用webpack实现react的热更新

webpack3热更新视图不更新

使用IntelliJ IDEA过程中webpack无法热更新