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

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

技术杂谈小彩虹2021-07-07 23:07:4140A+A-

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

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

2. webpack5中热更新失效

环境是webpack5

解决办法:

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

3. 弹窗的热更新失效

问题发生的场景:

// 父组件
<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>

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们