Resolve the webpack-dev-server hot update exception

If it’s an efficient hot update, the page doesn’t refresh. And only the corresponding update resource is loaded.

Exceptions encountered during development:

  1. Hot update fails directly
  2. Hot updates are when the page is reloaded
  • Harm: All resources have to be retrieved, all interfaces have to be called again, and pages have to be re-rendered. It’s a huge waste of time and resources
  1. Hot update fails in webpack5
  2. Popover hot update failed

1. Hot update fails directly

Eslint and stylelint reported errors

If ESLint doesn't pass, it will compile, but you have to refresh to see the effect. If ESLint passes, the change will be hot updatedCopy the code

2. Hot updates are when the page is reloaded

Solution: : Although very ridiculous, but my native is like this (line by line comment test out). May be related to node version.

  1. In dev mode, merge cannot be used. (‘webpack-merge’)
  2. Dev mode, can’t use MiniCssExtractPlugin. Loader
  3. “dev”: “webpack-dev-server –config webpack.dev.js –hot –open –progress”,
    • — Can not be less hot, or devServer set hot: true

Ps: I don’t know if it’s my MAC native environment, I have to satisfy all three. But a colleague’s MAC only needs to meet that last requirement

3. Hot update fails in WebPack5

The environment is webpack5

Solutions:

// At the level of entry and output, add target: 'web'
module.exports = {
  + target: 'web',
    entry,
    output: {
        path: path.resolve(__dirname, 'dist')},... }Copy the code

4. Thermal update of popover fails

Where the problem occurs:

/ / the parent component<template>One child component is a popover<child-el-dialog></child-el-dialog>
</template>
<script>
    
</script>// Subcomponent pop-ups<child-el-dialog></child-el-dialog>
<template>.</template>
<script>Make changes in this, hot update will be invalid!!</script>
Copy the code

Solutions:

// In the parent component<template>One child component is a popover<child-el-dialog></child-el-dialog>
</template>
<script>The child component is changed, and then in the parent component, write a random JS in this position, such asconsole.log(11), then CMD +s save, the hot update will take effect ~</script>

Copy the code