webpack4配置热更新无效

来源:2-3 webpack-dev-server的配置和使用

sinner7

2018-06-22 09:20

据官网介绍,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回答

  • 神秘的宝爷
    2019-01-06 23:52:06
    config.devServer = {
        hotOnly:true
    }

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

  • 小程序魔王
    2018-10-19 17:21:52

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

  • _熟悉的人_0
    2018-06-29 14:03:13

    npm i webpack-dev-server --save 

  • sinner7
    2018-06-22 10:35:10

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

    可用版本:

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

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

Vue+Webpack打造todo应用

用前端最热门框架Vue+最火打包工具Webpack打造todo应用

84605 学习 · 787 问题

查看课程

相似问题