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:
- Hot update fails directly
- 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
- Hot update fails in webpack5
- 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.
- In dev mode, merge cannot be used. (‘webpack-merge’)
- Dev mode, can’t use MiniCssExtractPlugin. Loader
- “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