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

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

开发中碰到的异常情况：

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

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

解决办法：

  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

2. webpack5中热更新失效

环境是webpack5

解决办法：

  1. // 在entry和output的同级处，加上  target: 'web'
  2. module.exports = {
  3.   + target: 'web',
  4.     entry,
  5.     output: {
  6.         path: path.resolve(__dirname, 'dist')
  7.     },
  8.   ...
  9. }

3. 弹窗的热更新失效

问题发生的场景：

  1. // 父组件
  2. <template>
  3.     一个子组件是弹窗
  4.     <child-el-dialog></child-el-dialog>
  5. </template>
  6. <script>
  8. </script>
  10. // 子组件 弹窗 <child-el-dialog></child-el-dialog>
  11. <template>
  12.     ...
  13. </template>
  14. <script>
  15.     在这里面做修改，热更新会失效！！
  16. </script>

解决办法：

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