From 9f26ec5d0a0ddc13e728f2196b7b75474a1856c5 Mon Sep 17 00:00:00 2001 From: Guan <821143943@qq.com> Date: Fri, 21 Oct 2022 17:40:43 +0800 Subject: [PATCH 1/4] fix: preserve order of link tags on HMR --- src/index.js | 14 ++++++++++---- test/manual/index.html | 4 ++++ test/manual/webpack.config.js | 8 +++++++- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index 154f5fea..069ac721 100644 --- a/src/index.js +++ b/src/index.js @@ -826,7 +826,7 @@ class MiniCssExtractPlugin { return Template.asString([ `var createStylesheet = ${runtimeTemplate.basicFunction( - "chunkId, fullhref, resolve, reject", + "chunkId, fullhref, oldTag, resolve, reject", [ 'var linkTag = document.createElement("link");', this.runtimeOptions.attributes @@ -886,7 +886,13 @@ class MiniCssExtractPlugin { `var target = document.querySelector("${this.runtimeOptions.insert}");`, `target.parentNode.insertBefore(linkTag, target.nextSibling);`, ]) - : Template.asString(["document.head.appendChild(linkTag);"]), + : Template.asString([ + "if (oldTag) {", + Template.indent(["oldTag.after(linkTag);"]), + "} else {", + Template.indent(["document.head.appendChild(linkTag);"]), + "}", + ]), "return linkTag;", ] )};`, @@ -919,7 +925,7 @@ class MiniCssExtractPlugin { `var href = ${RuntimeGlobals.require}.miniCssF(chunkId);`, `var fullhref = ${RuntimeGlobals.publicPath} + href;`, "if(findStylesheet(href, fullhref)) return resolve();", - "createStylesheet(chunkId, fullhref, resolve, reject);", + "createStylesheet(chunkId, fullhref, null, resolve, reject);", ] )});` )}`, @@ -995,7 +1001,7 @@ class MiniCssExtractPlugin { `promises.push(new Promise(${runtimeTemplate.basicFunction( "resolve, reject", [ - `var tag = createStylesheet(chunkId, fullhref, ${runtimeTemplate.basicFunction( + `var tag = createStylesheet(chunkId, fullhref, oldTag, ${runtimeTemplate.basicFunction( "", [ 'tag.as = "style";', diff --git a/test/manual/index.html b/test/manual/index.html index 0a438be4..610b7268 100644 --- a/test/manual/index.html +++ b/test/manual/index.html @@ -49,6 +49,10 @@ . Additional clicks have no effect.

+

+ (HMR) Now modify the color in lazy.css and save it: This should remain + orange. +

Refresh and press buttons in reverse order: This should turn green instead. diff --git a/test/manual/webpack.config.js b/test/manual/webpack.config.js index 4587f51f..3892d04a 100644 --- a/test/manual/webpack.config.js +++ b/test/manual/webpack.config.js @@ -69,7 +69,13 @@ module.exports = { ], devServer: { hot: ENABLE_HMR, - static: __dirname, + static: { + directory: __dirname, + watch: { + // prevent page reload on source change so that we can test HMR + ignored: /src/, + }, + }, headers: { "Access-Control-Allow-Origin": "*", }, From 31e0388cc8f5bf5053f86d035e17c6a12f6972b0 Mon Sep 17 00:00:00 2001 From: Guan <821143943@qq.com> Date: Mon, 28 Nov 2022 02:03:50 +0800 Subject: [PATCH 2/4] test: update expected files See #982 --- ...60abdfefdd41ec.css => 0.32c982869d9446e21cfa.css} | 0 ...0460abdfefdd41ec.css => 32c982869d9446e21cfa.css} | 0 .../expected/webpack-5-importModule/main.js | 12 ++++++++---- test/cases/hmr/expected/main.js | 12 ++++++++---- test/cases/insert-function/expected/main.js | 5 +++-- test/cases/insert-string/expected/main.js | 4 ++-- test/cases/insert-undefined/expected/main.js | 10 +++++++--- 7 files changed, 28 insertions(+), 15 deletions(-) rename test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/{0.c4400460abdfefdd41ec.css => 0.32c982869d9446e21cfa.css} (100%) rename test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/{c4400460abdfefdd41ec.css => 32c982869d9446e21cfa.css} (100%) diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.c4400460abdfefdd41ec.css b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.32c982869d9446e21cfa.css similarity index 100% rename from test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.c4400460abdfefdd41ec.css rename to test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.32c982869d9446e21cfa.css diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/c4400460abdfefdd41ec.css b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/32c982869d9446e21cfa.css similarity index 100% rename from test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/c4400460abdfefdd41ec.css rename to test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/32c982869d9446e21cfa.css diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js index 81166abf..6acd31cc 100644 --- a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js +++ b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js @@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__); /******/ /******/ /* webpack/runtime/getFullHash */ /******/ (() => { -/******/ __webpack_require__.h = () => ("c4400460abdfefdd41ec") +/******/ __webpack_require__.h = () => ("32c982869d9446e21cfa") /******/ })(); /******/ /******/ /* webpack/runtime/global */ @@ -171,7 +171,7 @@ __webpack_require__.r(__webpack_exports__); /******/ /******/ /* webpack/runtime/css loading */ /******/ (() => { -/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => { +/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => { /******/ var linkTag = document.createElement("link"); /******/ /******/ linkTag.rel = "stylesheet"; @@ -195,7 +195,11 @@ __webpack_require__.r(__webpack_exports__); /******/ linkTag.onerror = linkTag.onload = onLinkComplete; /******/ linkTag.href = fullhref; /******/ -/******/ document.head.appendChild(linkTag); +/******/ if (oldTag) { +/******/ oldTag.after(linkTag); +/******/ } else { +/******/ document.head.appendChild(linkTag); +/******/ } /******/ return linkTag; /******/ }; /******/ var findStylesheet = (href, fullhref) => { @@ -217,7 +221,7 @@ __webpack_require__.r(__webpack_exports__); /******/ var href = __webpack_require__.miniCssF(chunkId); /******/ var fullhref = __webpack_require__.p + href; /******/ if(findStylesheet(href, fullhref)) return resolve(); -/******/ createStylesheet(chunkId, fullhref, resolve, reject); +/******/ createStylesheet(chunkId, fullhref, null, resolve, reject); /******/ }); /******/ } /******/ // object to store loaded CSS chunks diff --git a/test/cases/hmr/expected/main.js b/test/cases/hmr/expected/main.js index 05985243..ee4a6f9f 100644 --- a/test/cases/hmr/expected/main.js +++ b/test/cases/hmr/expected/main.js @@ -934,7 +934,7 @@ __webpack_require__.r(__webpack_exports__); /******/ /******/ /* webpack/runtime/css loading */ /******/ (() => { -/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => { +/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => { /******/ var linkTag = document.createElement("link"); /******/ /******/ linkTag.rel = "stylesheet"; @@ -958,7 +958,11 @@ __webpack_require__.r(__webpack_exports__); /******/ linkTag.onerror = linkTag.onload = onLinkComplete; /******/ linkTag.href = fullhref; /******/ -/******/ document.head.appendChild(linkTag); +/******/ if (oldTag) { +/******/ oldTag.after(linkTag); +/******/ } else { +/******/ document.head.appendChild(linkTag); +/******/ } /******/ return linkTag; /******/ }; /******/ var findStylesheet = (href, fullhref) => { @@ -980,7 +984,7 @@ __webpack_require__.r(__webpack_exports__); /******/ var href = __webpack_require__.miniCssF(chunkId); /******/ var fullhref = __webpack_require__.p + href; /******/ if(findStylesheet(href, fullhref)) return resolve(); -/******/ createStylesheet(chunkId, fullhref, resolve, reject); +/******/ createStylesheet(chunkId, fullhref, null, resolve, reject); /******/ }); /******/ } /******/ // no chunk loading @@ -1007,7 +1011,7 @@ __webpack_require__.r(__webpack_exports__); /******/ var oldTag = findStylesheet(href, fullhref); /******/ if(!oldTag) return; /******/ promises.push(new Promise((resolve, reject) => { -/******/ var tag = createStylesheet(chunkId, fullhref, () => { +/******/ var tag = createStylesheet(chunkId, fullhref, oldTag, () => { /******/ tag.as = "style"; /******/ tag.rel = "preload"; /******/ resolve(); diff --git a/test/cases/insert-function/expected/main.js b/test/cases/insert-function/expected/main.js index 17b89e75..9852f152 100644 --- a/test/cases/insert-function/expected/main.js +++ b/test/cases/insert-function/expected/main.js @@ -155,7 +155,7 @@ /******/ /******/ /* webpack/runtime/css loading */ /******/ (() => { -/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => { +/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => { /******/ var linkTag = document.createElement("link"); /******/ /******/ linkTag.rel = "stylesheet"; @@ -181,6 +181,7 @@ /******/ /******/ (function (linkTag) { /******/ const reference = document.querySelector(".hot-reload"); +/******/ /******/ if (reference) { /******/ reference.parentNode.insertBefore(linkTag, reference); /******/ } @@ -206,7 +207,7 @@ /******/ var href = __webpack_require__.miniCssF(chunkId); /******/ var fullhref = __webpack_require__.p + href; /******/ if(findStylesheet(href, fullhref)) return resolve(); -/******/ createStylesheet(chunkId, fullhref, resolve, reject); +/******/ createStylesheet(chunkId, fullhref, null, resolve, reject); /******/ }); /******/ } /******/ // object to store loaded CSS chunks diff --git a/test/cases/insert-string/expected/main.js b/test/cases/insert-string/expected/main.js index 28c69b09..05e9aaeb 100644 --- a/test/cases/insert-string/expected/main.js +++ b/test/cases/insert-string/expected/main.js @@ -155,7 +155,7 @@ /******/ /******/ /* webpack/runtime/css loading */ /******/ (() => { -/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => { +/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => { /******/ var linkTag = document.createElement("link"); /******/ /******/ linkTag.rel = "stylesheet"; @@ -202,7 +202,7 @@ /******/ var href = __webpack_require__.miniCssF(chunkId); /******/ var fullhref = __webpack_require__.p + href; /******/ if(findStylesheet(href, fullhref)) return resolve(); -/******/ createStylesheet(chunkId, fullhref, resolve, reject); +/******/ createStylesheet(chunkId, fullhref, null, resolve, reject); /******/ }); /******/ } /******/ // object to store loaded CSS chunks diff --git a/test/cases/insert-undefined/expected/main.js b/test/cases/insert-undefined/expected/main.js index 2cc6ae2b..06940274 100644 --- a/test/cases/insert-undefined/expected/main.js +++ b/test/cases/insert-undefined/expected/main.js @@ -155,7 +155,7 @@ /******/ /******/ /* webpack/runtime/css loading */ /******/ (() => { -/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => { +/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => { /******/ var linkTag = document.createElement("link"); /******/ /******/ linkTag.rel = "stylesheet"; @@ -179,7 +179,11 @@ /******/ linkTag.onerror = linkTag.onload = onLinkComplete; /******/ linkTag.href = fullhref; /******/ -/******/ document.head.appendChild(linkTag); +/******/ if (oldTag) { +/******/ oldTag.after(linkTag); +/******/ } else { +/******/ document.head.appendChild(linkTag); +/******/ } /******/ return linkTag; /******/ }; /******/ var findStylesheet = (href, fullhref) => { @@ -201,7 +205,7 @@ /******/ var href = __webpack_require__.miniCssF(chunkId); /******/ var fullhref = __webpack_require__.p + href; /******/ if(findStylesheet(href, fullhref)) return resolve(); -/******/ createStylesheet(chunkId, fullhref, resolve, reject); +/******/ createStylesheet(chunkId, fullhref, null, resolve, reject); /******/ }); /******/ } /******/ // object to store loaded CSS chunks From dd50dcee4d6e79ce56c5a3dae40686fb1186884e Mon Sep 17 00:00:00 2001 From: Guan <821143943@qq.com> Date: Mon, 28 Nov 2022 10:24:39 +0800 Subject: [PATCH 3/4] test: update expected files --- test/cases/insert-function/expected/main.js | 1 - 1 file changed, 1 deletion(-) diff --git a/test/cases/insert-function/expected/main.js b/test/cases/insert-function/expected/main.js index 9852f152..0034d7cf 100644 --- a/test/cases/insert-function/expected/main.js +++ b/test/cases/insert-function/expected/main.js @@ -181,7 +181,6 @@ /******/ /******/ (function (linkTag) { /******/ const reference = document.querySelector(".hot-reload"); -/******/ /******/ if (reference) { /******/ reference.parentNode.insertBefore(linkTag, reference); /******/ } From b8e28dc22f9ce4d9fdf3dc33301d4ca989e85a7f Mon Sep 17 00:00:00 2001 From: Guan <821143943@qq.com> Date: Tue, 29 Nov 2022 20:04:05 +0800 Subject: [PATCH 4/4] test: update expected files --- ...d315f22aa63867.css => 0.70641d5edcf4cb37424c.css} | 0 ...b5d315f22aa63867.css => 70641d5edcf4cb37424c.css} | 0 .../expected/webpack-5/main.js | 12 ++++++++---- 3 files changed, 8 insertions(+), 4 deletions(-) rename test/cases/chunkFilename-fullhash/expected/webpack-5/{0.03b0b5d315f22aa63867.css => 0.70641d5edcf4cb37424c.css} (100%) rename test/cases/chunkFilename-fullhash/expected/webpack-5/{03b0b5d315f22aa63867.css => 70641d5edcf4cb37424c.css} (100%) diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5/0.03b0b5d315f22aa63867.css b/test/cases/chunkFilename-fullhash/expected/webpack-5/0.70641d5edcf4cb37424c.css similarity index 100% rename from test/cases/chunkFilename-fullhash/expected/webpack-5/0.03b0b5d315f22aa63867.css rename to test/cases/chunkFilename-fullhash/expected/webpack-5/0.70641d5edcf4cb37424c.css diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5/03b0b5d315f22aa63867.css b/test/cases/chunkFilename-fullhash/expected/webpack-5/70641d5edcf4cb37424c.css similarity index 100% rename from test/cases/chunkFilename-fullhash/expected/webpack-5/03b0b5d315f22aa63867.css rename to test/cases/chunkFilename-fullhash/expected/webpack-5/70641d5edcf4cb37424c.css diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5/main.js b/test/cases/chunkFilename-fullhash/expected/webpack-5/main.js index 6724eba3..58994c6c 100644 --- a/test/cases/chunkFilename-fullhash/expected/webpack-5/main.js +++ b/test/cases/chunkFilename-fullhash/expected/webpack-5/main.js @@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__); /******/ /******/ /* webpack/runtime/getFullHash */ /******/ (() => { -/******/ __webpack_require__.h = () => ("03b0b5d315f22aa63867") +/******/ __webpack_require__.h = () => ("70641d5edcf4cb37424c") /******/ })(); /******/ /******/ /* webpack/runtime/global */ @@ -171,7 +171,7 @@ __webpack_require__.r(__webpack_exports__); /******/ /******/ /* webpack/runtime/css loading */ /******/ (() => { -/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => { +/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => { /******/ var linkTag = document.createElement("link"); /******/ /******/ linkTag.rel = "stylesheet"; @@ -195,7 +195,11 @@ __webpack_require__.r(__webpack_exports__); /******/ linkTag.onerror = linkTag.onload = onLinkComplete; /******/ linkTag.href = fullhref; /******/ -/******/ document.head.appendChild(linkTag); +/******/ if (oldTag) { +/******/ oldTag.after(linkTag); +/******/ } else { +/******/ document.head.appendChild(linkTag); +/******/ } /******/ return linkTag; /******/ }; /******/ var findStylesheet = (href, fullhref) => { @@ -217,7 +221,7 @@ __webpack_require__.r(__webpack_exports__); /******/ var href = __webpack_require__.miniCssF(chunkId); /******/ var fullhref = __webpack_require__.p + href; /******/ if(findStylesheet(href, fullhref)) return resolve(); -/******/ createStylesheet(chunkId, fullhref, resolve, reject); +/******/ createStylesheet(chunkId, fullhref, null, resolve, reject); /******/ }); /******/ } /******/ // object to store loaded CSS chunks