解决webpack-dev-server热更新异常情况

·  阅读 725

解决webpack-dev-server热更新异常情况

如果是高效的热更新,页面就不会刷新。并且只会加载对应的更新资源。

开发中碰到的异常情况:

  1. 热更新直接失效
  2. 热更新是页面刷新reload的情况
  • 危害:所有的资源都要重新获取,并且所有的接口还要重新调用,页面也要重新渲染。非常的浪费时间和资源
  1. webpack5中热更新失效
  2. 弹窗的热更新失效

1. 热更新直接失效

eslint 和 stylelint 报错解决一下

eslint不通过的话,会编译,但是要刷新才可以看到效果
如果 eslint 通过了的话,直接更改就能热更新成功
复制代码

2. 热更新是页面刷新reload的情况

解决办法:(虽然很离谱,但我本机就是这样的(一行一行注释test出来的)。。 怀疑和node版本有关系)

  1. dev模式下,不能用merge。('webpack-merge')
  2. dev模式下,不能用 MiniCssExtractPlugin.loader
  3. "dev": "webpack-dev-server --config webpack.dev.js --hot --open --progress",
    • --hot 不能少,或者devServer里配置 hot: true

另:不知道是不是我mac本机环境的问题,我这必须要3条都要满足。但同事的mac只需满足最后一条就行

3. webpack5中热更新失效

环境是webpack5

解决办法:

// 在entry和output的同级处,加上  target: 'web'
module.exports = {
  + target: 'web',
    entry,
    output: {
        path: path.resolve(__dirname, 'dist')
    },
  ...
}
复制代码

4. 弹窗的热更新失效

问题发生的场景:

// 父组件
<template>
    一个子组件是弹窗
    <child-el-dialog></child-el-dialog>
</template>
<script>
    
</script>

// 子组件 弹窗 <child-el-dialog></child-el-dialog>
<template>
    ...
</template>
<script>
    在这里面做修改,热更新会失效!!
</script>
复制代码

解决办法:

// 父组件中
<template>
    一个子组件是弹窗
    <child-el-dialog></child-el-dialog>
</template>
<script>
    子组件改完了,然后在父组件中,这个位置 随便写一个js,比如 console.log(11),然后 cmd+s 保存,热更新就能生效~
</script>

复制代码
分类:
前端
标签:
分类:
前端
标签: