解决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>