Skip to content

Commit 6ea0922

Browse files
guansssguansss
authored
fix: preserve order of link tags on HMR (#982)
1 parent 2633446 commit 6ea0922

File tree

13 files changed

+56
-24
lines changed

13 files changed

+56
-24
lines changed

‎src/index.js

+10-4
Original file line numberDiff line numberDiff line change
@@ -826,7 +826,7 @@ class MiniCssExtractPlugin {
826826

827827
return Template.asString([
828828
`var createStylesheet = ${runtimeTemplate.basicFunction(
829-
"chunkId, fullhref, resolve, reject",
829+
"chunkId, fullhref, oldTag, resolve, reject",
830830
[
831831
'var linkTag = document.createElement("link");',
832832
this.runtimeOptions.attributes
@@ -886,7 +886,13 @@ class MiniCssExtractPlugin {
886886
`var target = document.querySelector("${this.runtimeOptions.insert}");`,
887887
`target.parentNode.insertBefore(linkTag, target.nextSibling);`,
888888
])
889-
: Template.asString(["document.head.appendChild(linkTag);"]),
889+
: Template.asString([
890+
"if (oldTag) {",
891+
Template.indent(["oldTag.after(linkTag);"]),
892+
"} else {",
893+
Template.indent(["document.head.appendChild(linkTag);"]),
894+
"}",
895+
]),
890896
"return linkTag;",
891897
]
892898
)};`,
@@ -919,7 +925,7 @@ class MiniCssExtractPlugin {
919925
`var href = ${RuntimeGlobals.require}.miniCssF(chunkId);`,
920926
`var fullhref = ${RuntimeGlobals.publicPath} + href;`,
921927
"if(findStylesheet(href, fullhref)) return resolve();",
922-
"createStylesheet(chunkId, fullhref, resolve, reject);",
928+
"createStylesheet(chunkId, fullhref, null, resolve, reject);",
923929
]
924930
)});`
925931
)}`,
@@ -995,7 +1001,7 @@ class MiniCssExtractPlugin {
9951001
`promises.push(new Promise(${runtimeTemplate.basicFunction(
9961002
"resolve, reject",
9971003
[
998-
`var tag = createStylesheet(chunkId, fullhref, ${runtimeTemplate.basicFunction(
1004+
`var tag = createStylesheet(chunkId, fullhref, oldTag, ${runtimeTemplate.basicFunction(
9991005
"",
10001006
[
10011007
'tag.as = "style";',

‎test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.c4400460abdfefdd41ec.css renamed to ‎test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.32c982869d9446e21cfa.css

File renamed without changes.

‎test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/c4400460abdfefdd41ec.css renamed to ‎test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/32c982869d9446e21cfa.css

File renamed without changes.

‎test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
7373
/******/
7474
/******/ /* webpack/runtime/getFullHash */
7575
/******/ (() => {
76-
/******/ __webpack_require__.h = () => ("c4400460abdfefdd41ec")
76+
/******/ __webpack_require__.h = () => ("32c982869d9446e21cfa")
7777
/******/ })();
7878
/******/
7979
/******/ /* webpack/runtime/global */
@@ -171,7 +171,7 @@ __webpack_require__.r(__webpack_exports__);
171171
/******/
172172
/******/ /* webpack/runtime/css loading */
173173
/******/ (() => {
174-
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
174+
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
175175
/******/ var linkTag = document.createElement("link");
176176
/******/
177177
/******/ linkTag.rel = "stylesheet";
@@ -195,7 +195,11 @@ __webpack_require__.r(__webpack_exports__);
195195
/******/ linkTag.onerror = linkTag.onload = onLinkComplete;
196196
/******/ linkTag.href = fullhref;
197197
/******/
198-
/******/ document.head.appendChild(linkTag);
198+
/******/ if (oldTag) {
199+
/******/ oldTag.after(linkTag);
200+
/******/ } else {
201+
/******/ document.head.appendChild(linkTag);
202+
/******/ }
199203
/******/ return linkTag;
200204
/******/ };
201205
/******/ var findStylesheet = (href, fullhref) => {
@@ -217,7 +221,7 @@ __webpack_require__.r(__webpack_exports__);
217221
/******/ var href = __webpack_require__.miniCssF(chunkId);
218222
/******/ var fullhref = __webpack_require__.p + href;
219223
/******/ if(findStylesheet(href, fullhref)) return resolve();
220-
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
224+
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
221225
/******/ });
222226
/******/ }
223227
/******/ // object to store loaded CSS chunks

‎test/cases/chunkFilename-fullhash/expected/webpack-5/0.03b0b5d315f22aa63867.css renamed to ‎test/cases/chunkFilename-fullhash/expected/webpack-5/0.70641d5edcf4cb37424c.css

File renamed without changes.

‎test/cases/chunkFilename-fullhash/expected/webpack-5/03b0b5d315f22aa63867.css renamed to ‎test/cases/chunkFilename-fullhash/expected/webpack-5/70641d5edcf4cb37424c.css

File renamed without changes.

‎test/cases/chunkFilename-fullhash/expected/webpack-5/main.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
7373
/******/
7474
/******/ /* webpack/runtime/getFullHash */
7575
/******/ (() => {
76-
/******/ __webpack_require__.h = () => ("03b0b5d315f22aa63867")
76+
/******/ __webpack_require__.h = () => ("70641d5edcf4cb37424c")
7777
/******/ })();
7878
/******/
7979
/******/ /* webpack/runtime/global */
@@ -171,7 +171,7 @@ __webpack_require__.r(__webpack_exports__);
171171
/******/
172172
/******/ /* webpack/runtime/css loading */
173173
/******/ (() => {
174-
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
174+
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
175175
/******/ var linkTag = document.createElement("link");
176176
/******/
177177
/******/ linkTag.rel = "stylesheet";
@@ -195,7 +195,11 @@ __webpack_require__.r(__webpack_exports__);
195195
/******/ linkTag.onerror = linkTag.onload = onLinkComplete;
196196
/******/ linkTag.href = fullhref;
197197
/******/
198-
/******/ document.head.appendChild(linkTag);
198+
/******/ if (oldTag) {
199+
/******/ oldTag.after(linkTag);
200+
/******/ } else {
201+
/******/ document.head.appendChild(linkTag);
202+
/******/ }
199203
/******/ return linkTag;
200204
/******/ };
201205
/******/ var findStylesheet = (href, fullhref) => {
@@ -217,7 +221,7 @@ __webpack_require__.r(__webpack_exports__);
217221
/******/ var href = __webpack_require__.miniCssF(chunkId);
218222
/******/ var fullhref = __webpack_require__.p + href;
219223
/******/ if(findStylesheet(href, fullhref)) return resolve();
220-
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
224+
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
221225
/******/ });
222226
/******/ }
223227
/******/ // object to store loaded CSS chunks

‎test/cases/hmr/expected/main.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -934,7 +934,7 @@ __webpack_require__.r(__webpack_exports__);
934934
/******/
935935
/******/ /* webpack/runtime/css loading */
936936
/******/ (() => {
937-
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
937+
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
938938
/******/ var linkTag = document.createElement("link");
939939
/******/
940940
/******/ linkTag.rel = "stylesheet";
@@ -958,7 +958,11 @@ __webpack_require__.r(__webpack_exports__);
958958
/******/ linkTag.onerror = linkTag.onload = onLinkComplete;
959959
/******/ linkTag.href = fullhref;
960960
/******/
961-
/******/ document.head.appendChild(linkTag);
961+
/******/ if (oldTag) {
962+
/******/ oldTag.after(linkTag);
963+
/******/ } else {
964+
/******/ document.head.appendChild(linkTag);
965+
/******/ }
962966
/******/ return linkTag;
963967
/******/ };
964968
/******/ var findStylesheet = (href, fullhref) => {
@@ -980,7 +984,7 @@ __webpack_require__.r(__webpack_exports__);
980984
/******/ var href = __webpack_require__.miniCssF(chunkId);
981985
/******/ var fullhref = __webpack_require__.p + href;
982986
/******/ if(findStylesheet(href, fullhref)) return resolve();
983-
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
987+
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
984988
/******/ });
985989
/******/ }
986990
/******/ // no chunk loading
@@ -1007,7 +1011,7 @@ __webpack_require__.r(__webpack_exports__);
10071011
/******/ var oldTag = findStylesheet(href, fullhref);
10081012
/******/ if(!oldTag) return;
10091013
/******/ promises.push(new Promise((resolve, reject) => {
1010-
/******/ var tag = createStylesheet(chunkId, fullhref, () => {
1014+
/******/ var tag = createStylesheet(chunkId, fullhref, oldTag, () => {
10111015
/******/ tag.as = "style";
10121016
/******/ tag.rel = "preload";
10131017
/******/ resolve();

‎test/cases/insert-function/expected/main.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@
155155
/******/
156156
/******/ /* webpack/runtime/css loading */
157157
/******/ (() => {
158-
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
158+
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
159159
/******/ var linkTag = document.createElement("link");
160160
/******/
161161
/******/ linkTag.rel = "stylesheet";
@@ -206,7 +206,7 @@
206206
/******/ var href = __webpack_require__.miniCssF(chunkId);
207207
/******/ var fullhref = __webpack_require__.p + href;
208208
/******/ if(findStylesheet(href, fullhref)) return resolve();
209-
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
209+
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
210210
/******/ });
211211
/******/ }
212212
/******/ // object to store loaded CSS chunks

‎test/cases/insert-string/expected/main.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@
155155
/******/
156156
/******/ /* webpack/runtime/css loading */
157157
/******/ (() => {
158-
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
158+
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
159159
/******/ var linkTag = document.createElement("link");
160160
/******/
161161
/******/ linkTag.rel = "stylesheet";
@@ -202,7 +202,7 @@
202202
/******/ var href = __webpack_require__.miniCssF(chunkId);
203203
/******/ var fullhref = __webpack_require__.p + href;
204204
/******/ if(findStylesheet(href, fullhref)) return resolve();
205-
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
205+
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
206206
/******/ });
207207
/******/ }
208208
/******/ // object to store loaded CSS chunks

‎test/cases/insert-undefined/expected/main.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@
155155
/******/
156156
/******/ /* webpack/runtime/css loading */
157157
/******/ (() => {
158-
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
158+
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
159159
/******/ var linkTag = document.createElement("link");
160160
/******/
161161
/******/ linkTag.rel = "stylesheet";
@@ -179,7 +179,11 @@
179179
/******/ linkTag.onerror = linkTag.onload = onLinkComplete;
180180
/******/ linkTag.href = fullhref;
181181
/******/
182-
/******/ document.head.appendChild(linkTag);
182+
/******/ if (oldTag) {
183+
/******/ oldTag.after(linkTag);
184+
/******/ } else {
185+
/******/ document.head.appendChild(linkTag);
186+
/******/ }
183187
/******/ return linkTag;
184188
/******/ };
185189
/******/ var findStylesheet = (href, fullhref) => {
@@ -201,7 +205,7 @@
201205
/******/ var href = __webpack_require__.miniCssF(chunkId);
202206
/******/ var fullhref = __webpack_require__.p + href;
203207
/******/ if(findStylesheet(href, fullhref)) return resolve();
204-
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
208+
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
205209
/******/ });
206210
/******/ }
207211
/******/ // object to store loaded CSS chunks

‎test/manual/index.html

+4
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@
4949
<button class="lazy-button2">pressing this button</button>. Additional
5050
clicks have no effect.
5151
</p>
52+
<p>
53+
(HMR) Now modify the color in lazy.css and save it: This should remain
54+
orange.
55+
</p>
5256
<p>
5357
Refresh and press buttons in reverse order: This should turn green
5458
instead.

‎test/manual/webpack.config.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,13 @@ module.exports = {
6969
],
7070
devServer: {
7171
hot: ENABLE_HMR,
72-
static: __dirname,
72+
static: {
73+
directory: __dirname,
74+
watch: {
75+
// prevent page reload on source change so that we can test HMR
76+
ignored: /src/,
77+
},
78+
},
7379
headers: {
7480
"Access-Control-Allow-Origin": "*",
7581
},

0 commit comments

Comments
 (0)