webpack设置热更新

时间:2023-03-09 05:05:39
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
}