Skip to content

Commit 6e56877

Browse files
refactor: code
1 parent 4fcb568 commit 6e56877

24 files changed

+145
-83
lines changed

src/CssChunkLoadingRuntimeModule.js

Lines changed: 62 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,6 @@ class CssChunkLoadingRuntimeModule extends RuntimeModule {
1616
const fn = RuntimeGlobals.ensureChunkHandlers;
1717
const { compilation, chunk } = this;
1818
const { runtimeTemplate } = compilation;
19-
const withCompat = this.runtimeRequirements.has(
20-
RuntimeGlobals.compatGetDefaultExport
21-
);
22-
2319
const chunkMaps = chunk.getChunkMaps();
2420
const { crossOriginLoading } = compilation.outputOptions;
2521
const linkHrefPath = compilation.getAssetPath(
@@ -81,76 +77,73 @@ class CssChunkLoadingRuntimeModule extends RuntimeModule {
8177
),
8278
'}',
8379
'',
84-
withCompat
85-
? Template.asString([
86-
`${fn}.n = ${runtimeTemplate.basicFunction(
87-
'chunkId, promises',
80+
Template.asString([
81+
`${fn}.n = ${runtimeTemplate.basicFunction(
82+
'chunkId, promises',
83+
Template.indent([
84+
`// ${this.pluginName} CSS loading`,
85+
`var cssChunks = ${JSON.stringify(this.chunkMap)};`,
86+
'if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);',
87+
'else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {',
88+
Template.indent([
89+
'promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) {',
8890
Template.indent([
89-
// source,
90-
`// ${this.pluginName} CSS loading`,
91-
`var cssChunks = ${JSON.stringify(this.chunkMap)};`,
92-
'if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);',
93-
'else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {',
91+
`var href = ${linkHrefPath};`,
92+
`var fullhref = __webpack_require__.p + href;`,
93+
'var existingLinkTags = document.getElementsByTagName("link");',
94+
'for(var i = 0; i < existingLinkTags.length; i++) {',
9495
Template.indent([
95-
'promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) {',
96-
Template.indent([
97-
`var href = ${linkHrefPath};`,
98-
`var fullhref = __webpack_require__.p + href;`,
99-
'var existingLinkTags = document.getElementsByTagName("link");',
100-
'for(var i = 0; i < existingLinkTags.length; i++) {',
101-
Template.indent([
102-
'var tag = existingLinkTags[i];',
103-
'var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");',
104-
'if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return resolve();',
105-
]),
106-
'}',
107-
'var existingStyleTags = document.getElementsByTagName("style");',
108-
'for(var i = 0; i < existingStyleTags.length; i++) {',
109-
Template.indent([
110-
'var tag = existingStyleTags[i];',
111-
'var dataHref = tag.getAttribute("data-href");',
112-
'if(dataHref === href || dataHref === fullhref) return resolve();',
113-
]),
114-
'}',
115-
'var linkTag = document.createElement("link");',
116-
'linkTag.rel = "stylesheet";',
117-
'linkTag.type = "text/css";',
118-
'linkTag.onload = resolve;',
119-
'linkTag.onerror = function(event) {',
120-
Template.indent([
121-
'var request = event && event.target && event.target.src || fullhref;',
122-
'var err = new Error("Loading CSS chunk " + chunkId + " failed.\\n(" + request + ")");',
123-
'err.code = "CSS_CHUNK_LOAD_FAILED";',
124-
'err.request = request;',
125-
'delete installedCssChunks[chunkId]',
126-
'linkTag.parentNode.removeChild(linkTag)',
127-
'reject(err);',
128-
]),
129-
'};',
130-
'linkTag.href = fullhref;',
131-
crossOriginLoading
132-
? Template.asString([
133-
`if (linkTag.href.indexOf(window.location.origin + '/') !== 0) {`,
134-
Template.indent(
135-
`linkTag.crossOrigin = ${JSON.stringify(
136-
crossOriginLoading
137-
)};`
138-
),
139-
'}',
140-
])
141-
: '',
142-
'var head = document.getElementsByTagName("head")[0];',
143-
'head.appendChild(linkTag);',
144-
]),
145-
'}).then(function() {',
146-
Template.indent(['installedCssChunks[chunkId] = 0;']),
147-
'}));',
96+
'var tag = existingLinkTags[i];',
97+
'var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");',
98+
'if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return resolve();',
14899
]),
149100
'}',
150-
])
151-
)};`,
101+
'var existingStyleTags = document.getElementsByTagName("style");',
102+
'for(var i = 0; i < existingStyleTags.length; i++) {',
103+
Template.indent([
104+
'var tag = existingStyleTags[i];',
105+
'var dataHref = tag.getAttribute("data-href");',
106+
'if(dataHref === href || dataHref === fullhref) return resolve();',
107+
]),
108+
'}',
109+
'var linkTag = document.createElement("link");',
110+
'linkTag.rel = "stylesheet";',
111+
'linkTag.type = "text/css";',
112+
'linkTag.onload = resolve;',
113+
'linkTag.onerror = function(event) {',
114+
Template.indent([
115+
'var request = event && event.target && event.target.src || fullhref;',
116+
'var err = new Error("Loading CSS chunk " + chunkId + " failed.\\n(" + request + ")");',
117+
'err.code = "CSS_CHUNK_LOAD_FAILED";',
118+
'err.request = request;',
119+
'delete installedCssChunks[chunkId]',
120+
'linkTag.parentNode.removeChild(linkTag)',
121+
'reject(err);',
122+
]),
123+
'};',
124+
'linkTag.href = fullhref;',
125+
crossOriginLoading
126+
? Template.asString([
127+
`if (linkTag.href.indexOf(window.location.origin + '/') !== 0) {`,
128+
Template.indent(
129+
`linkTag.crossOrigin = ${JSON.stringify(
130+
crossOriginLoading
131+
)};`
132+
),
133+
'}',
134+
])
135+
: '',
136+
'var head = document.getElementsByTagName("head")[0];',
137+
'head.appendChild(linkTag);',
138+
]),
139+
'}).then(function() {',
140+
Template.indent(['installedCssChunks[chunkId] = 0;']),
141+
'}));',
142+
]),
143+
'}',
152144
])
153-
: '',
145+
)};`,
146+
]),
154147
]);
155148
}
156149
}

src/index.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ class MiniCssExtractPlugin {
170170
const { chunkGraph } = compilation;
171171

172172
const renderedModules = Array.from(
173-
this.getChunks(chunk, chunkGraph)
173+
this.getChunkModules(chunk, chunkGraph)
174174
).filter((module) => module.type === MODULE_TYPE);
175175

176176
const filenameTemplate =
@@ -203,7 +203,7 @@ class MiniCssExtractPlugin {
203203
const { chunkGraph } = compilation;
204204

205205
const renderedModules = Array.from(
206-
this.getChunks(chunk, chunkGraph)
206+
this.getChunkModules(chunk, chunkGraph)
207207
).filter((module) => module.type === MODULE_TYPE);
208208

209209
const filenameTemplate =
@@ -236,7 +236,7 @@ class MiniCssExtractPlugin {
236236
const { chunkGraph } = compilation;
237237

238238
const renderedModules = Array.from(
239-
this.getChunks(chunk, chunkGraph)
239+
this.getChunkModules(chunk, chunkGraph)
240240
).filter((module) => module.type === MODULE_TYPE);
241241

242242
const filenameTemplate =
@@ -297,9 +297,9 @@ class MiniCssExtractPlugin {
297297
const { hashFunction, hashDigest, hashDigestLength } = outputOptions;
298298
const hash = createHash(hashFunction);
299299

300-
for (const m of this.getChunks(chunk, chunkGraph)) {
300+
for (const m of this.getChunkModules(chunk, chunkGraph)) {
301301
if (m.type === MODULE_TYPE) {
302-
m.updateHash(hash, chunkGraph);
302+
m.updateHash(hash, { chunkGraph });
303303
}
304304
}
305305

@@ -505,7 +505,7 @@ class MiniCssExtractPlugin {
505505
const { chunkGraph } = compilation;
506506

507507
for (const chunk of mainChunk.getAllAsyncChunks()) {
508-
for (const module of this.getChunks(chunk, chunkGraph)) {
508+
for (const module of this.getChunkModules(chunk, chunkGraph)) {
509509
if (module.type === MODULE_TYPE) {
510510
obj[chunk.id] = 1;
511511
break;

src/loader.js

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import NativeModule from 'module';
33
import path from 'path';
44

55
import loaderUtils from 'loader-utils';
6+
import webpack from 'webpack';
67
import NodeTemplatePlugin from 'webpack/lib/node/NodeTemplatePlugin';
78
import NodeTargetPlugin from 'webpack/lib/node/NodeTargetPlugin';
89
import LibraryTemplatePlugin from 'webpack/lib/LibraryTemplatePlugin';
@@ -131,15 +132,39 @@ export function pitch(request) {
131132

132133
let source;
133134

135+
if (typeof webpack.RuntimeModule !== 'undefined') {
136+
childCompiler.hooks.finishMake.tap(pluginName, (compilation) => {
137+
compilation.hooks.processAssets.tap(pluginName, () => {
138+
source =
139+
compilation.assets[childFilename] &&
140+
compilation.assets[childFilename].source();
141+
142+
// Remove all chunk assets
143+
compilation.chunks.forEach((chunk) => {
144+
chunk.files.forEach((file) => {
145+
delete compilation.assets[file]; // eslint-disable-line no-param-reassign
146+
});
147+
});
148+
});
149+
});
150+
} else {
151+
childCompiler.hooks.afterCompile.tap(pluginName, (compilation) => {
152+
source =
153+
compilation.assets[childFilename] &&
154+
compilation.assets[childFilename].source();
155+
156+
// Remove all chunk assets
157+
compilation.chunks.forEach((chunk) => {
158+
chunk.files.forEach((file) => {
159+
delete compilation.assets[file]; // eslint-disable-line no-param-reassign
160+
});
161+
});
162+
});
163+
}
164+
134165
const callback = this.async();
135166

136167
childCompiler.runAsChild((err, entries, compilation) => {
137-
source =
138-
compilation.assets[childFilename] &&
139-
compilation.assets[childFilename].source();
140-
141-
delete this._compilation.assets[childFilename];
142-
143168
const addDependencies = (dependencies) => {
144169
if (!Array.isArray(dependencies) && dependencies != null) {
145170
throw new Error(
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.styleA {
2+
background: red;
3+
}
4+
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.styleA {
2+
background: red;
3+
}
4+
5+
.styleB {
6+
background: blue;
7+
}
8+
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
body {
2+
background: red;
3+
}
4+
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
body {
2+
background: green;
3+
}
4+
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.async {
2+
color: red;
3+
}
4+
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
body {
2+
background: red;
3+
}
4+
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.async {
2+
color: red;
3+
}
4+
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
body {
2+
background: red;
3+
}
4+

test/cases/hmr/expected/webpack-5/main.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3598,7 +3598,6 @@ module.exports = function (x) {
35983598
/******/ }
35993599
/******/
36003600
/******/ // call accept handlers
3601-
/******/ var error = null;
36023601
/******/ for (var outdatedModuleId in outdatedDependencies) {
36033602
/******/ if (__webpack_require__.o(outdatedDependencies, outdatedModuleId)) {
36043603
/******/ var module = __webpack_require__.c[outdatedModuleId];
@@ -3630,7 +3629,7 @@ module.exports = function (x) {
36303629
/******/ });
36313630
/******/ }
36323631
/******/ if (!options.ignoreErrored) {
3633-
/******/ if (!error) error = err;
3632+
/******/ reportError(err);
36343633
/******/ }
36353634
/******/ }
36363635
/******/ }
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.wX52cuPepLZcpDx5S3yYO {
2+
background: red;
3+
}
4+
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
2+
.wX52cuPepLZcpDx5S3yYO {
3+
background: green;
4+
}
5+

0 commit comments

Comments
 (0)