为了账号安全,请及时绑定邮箱和手机立即绑定

webpack4配置热更新无效

据官网介绍,webpack-dev-server默认只是“刷新网页”

要实现热更新,除了配置options-> hot: true之外

还需要webpack内置插件:  new webpack.HotModuleReplacementPlugin()

导师的代码也是这样写的。

所以,有了我所下的代码:

if (isDev) {
    config.devtool = 'cheap-module-eval-source-map'
    config.devServer = {
        port: 8080,
        host: '0.0.0.0', 
        overlay: { errors: true },
        open: true,
        hot: true, 
     }
     config.plugins.push(
         new webpack.HotModuleReplacementPlugin(),
         new webpack.NoEmitOnErrorsPlugin(),
         new webpack.NamedModulesPlugin()
     )
}

此时重新npm run dev

去修改任意组件,chrome控制会显示 “app hot update”, 但实际上网页内容并没有实现更新?为什么会这样子?有解决该问题的同学吗?


下面是我scripts下的代码:

"dev": "cross-env NODE_ENV=development webpack-dev-server --mode development --config webpack.config.js"


正在回答

4 回答

config.devServer = {
    hotOnly:true
}

devServer配置中加一句这个试试,你这个热更新生效了,只是被devServer的自动刷新功能给盖过了

0 回复 有任何疑惑可以回复我~

webpack4有效啊,就是不知道你的为啥无效,你不用热更新更改组件有效吗?

0 回复 有任何疑惑可以回复我~

npm i webpack-dev-server --save 

0 回复 有任何疑惑可以回复我~

解决方法:不要使用webpack自带的webpack-dev-server, 自己重新yarn add

可用版本:

"webpack-dev-server": "^3.1.4"

如果有其他解决方案,请告知我噢

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

webpack4配置热更新无效

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信