Run npm run build and check dist/main.js. You shouldn't find the UsedComponent in there.
Run npm start
Apply a few changes to the src/RootComponent.vue. Changes applied to the templates or script sections won't be reflected. Changes applied to the style section will be reflected.
Apply a few changes to the src/Namespace/UsedComponent.vue. Changes applied to the template section will be partially reflected. Changes appllied to the script and style sections will be fully reflected.
Run npm start and try updating the RootComponent.vue or src/Namespace/UsedComponent.vue. HMR will ignore changes applied to the root component and only partially update the child component.
Open the webpack.config.js and comment out the sideEffects option.
Run npm run build and check dist/main.js again. You should find the UsedComponent in there this time.
Run npm start and try updating the RootComponent.vue or src/Namespace/UsedComponent.vue. HRM should pick up any changes made to these components.
What is expected?
Whether the sideEffects is set or not, HMR should pick up changes applied to any components.
What is actually happening?
HMR partially ignores changes applied to SFC compiled with vue-loader@15.9.8 when sideEffect=false is used.
HMR won't apply changes applied to existing lines of text, tags, and components of a child Vue components. However, new lines, tags, and components as well as removed ones will be reflected. Changes to the script and style section will always be reflected.
What is so special about sideEffect=false?
Without this option, Webpack would include into a bundle unused components should they be re-exported along with the used components via a common proxy.
// Namespace/index.js - a common proxy
export { default as UsedComponent } from './UsedComponent.vue'
export { default as UnusedComponent } from './UnusedComponent.vue'
It works just fine with Vue@3 and VueLoader@16, but I'm still on Vue@2 and VueLoader@15.9.8 and it would mean a world to me if you could fix the problem in that old and dusty v15!
Version
15.9.8
Reproduction link
https://github.com/nskazki/vue-loader-wont-hot-reload-text-nodes
Steps to reproduce
npm run build
and checkdist/main.js
. You shouldn't find theUsedComponent
in there.npm start
src/RootComponent.vue
. Changes applied to the templates or script sections won't be reflected. Changes applied to the style section will be reflected.src/Namespace/UsedComponent.vue
. Changes applied to the template section will be partially reflected. Changes appllied to the script and style sections will be fully reflected.npm start
and try updating theRootComponent.vue
orsrc/Namespace/UsedComponent.vue
. HMR will ignore changes applied to the root component and only partially update the child component.webpack.config.js
and comment out thesideEffects
option.npm run build
and checkdist/main.js
again. You should find theUsedComponent
in there this time.npm start
and try updating theRootComponent.vue
orsrc/Namespace/UsedComponent.vue
. HRM should pick up any changes made to these components.What is expected?
Whether the
sideEffects
is set or not, HMR should pick up changes applied to any components.What is actually happening?
HMR partially ignores changes applied to SFC compiled with
vue-loader@15.9.8
whensideEffect=false
is used.What is so special about sideEffect=false?
Without this option, Webpack would include into a bundle unused components should they be re-exported along with the used components via a common proxy.
It works just fine with Vue@3 and VueLoader@16, but I'm still on Vue@2 and VueLoader@15.9.8 and it would mean a world to me if you could fix the problem in that old and dusty v15!