Skip to content

Commit 4292ddb

Browse files
cap-Bernarditocap-Bernardito
committed
refactor: update deprecated hooks
1 parent 7d24229 commit 4292ddb

File tree

9 files changed

+240
-111
lines changed

9 files changed

+240
-111
lines changed

‎src/index.js‎

Lines changed: 174 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,8 @@ class CssModule extends webpack.Module {
8282
callback();
8383
}
8484

85-
updateHash(hash) {
86-
super.updateHash(hash);
85+
updateHash(hash, chunkGraph) {
86+
super.updateHash(hash, chunkGraph);
8787

8888
hash.update(this.content);
8989
hash.update(this.media || '');
@@ -132,7 +132,7 @@ class MiniCssExtractPlugin {
132132
);
133133
}
134134
} else {
135-
this.options.chunkFilename = '[id].css';
135+
this.options.chunkFilename = DEFAULT_FILENAME;
136136
}
137137
}
138138
}
@@ -149,71 +149,117 @@ class MiniCssExtractPlugin {
149149
new CssDependencyTemplate()
150150
);
151151

152-
compilation.mainTemplate.hooks.renderManifest.tap(
153-
pluginName,
154-
(result, { chunk }) => {
155-
const renderedModules = Array.from(chunk.modulesIterable).filter(
156-
(module) => module.type === MODULE_TYPE
157-
);
158-
159-
const filenameTemplate =
160-
chunk.filenameTemplate || this.options.filename;
161-
162-
if (renderedModules.length > 0) {
163-
result.push({
164-
render: () =>
165-
this.renderContentAsset(
166-
compilation,
152+
// Webpack 4
153+
if (!compilation.hooks.renderManifest) {
154+
compilation.mainTemplate.hooks.renderManifest.tap(
155+
pluginName,
156+
(result, { chunk }) => {
157+
const { chunkGraph } = compilation;
158+
159+
const renderedModules = Array.from(
160+
this.getChunks(chunk, chunkGraph)
161+
).filter((module) => module.type === MODULE_TYPE);
162+
163+
const filenameTemplate =
164+
chunk.filenameTemplate || this.options.filename;
165+
166+
if (renderedModules.length > 0) {
167+
result.push({
168+
render: () =>
169+
this.renderContentAsset(
170+
compilation,
171+
chunk,
172+
renderedModules,
173+
compilation.runtimeTemplate.requestShortener
174+
),
175+
filenameTemplate,
176+
pathOptions: {
167177
chunk,
168-
renderedModules,
169-
compilation.runtimeTemplate.requestShortener
170-
),
171-
filenameTemplate,
172-
pathOptions: {
173-
chunk,
174-
contentHashType: MODULE_TYPE,
175-
},
176-
identifier: `${pluginName}.${chunk.id}`,
177-
hash: chunk.contentHash[MODULE_TYPE],
178-
});
178+
contentHashType: MODULE_TYPE,
179+
},
180+
identifier: `${pluginName}.${chunk.id}`,
181+
hash: chunk.contentHash[MODULE_TYPE],
182+
});
183+
}
179184
}
180-
}
181-
);
182-
183-
compilation.chunkTemplate.hooks.renderManifest.tap(
184-
pluginName,
185-
(result, { chunk }) => {
186-
const renderedModules = Array.from(chunk.modulesIterable).filter(
187-
(module) => module.type === MODULE_TYPE
188-
);
189-
190-
const filenameTemplate =
191-
chunk.filenameTemplate || this.options.chunkFilename;
192-
193-
if (renderedModules.length > 0) {
194-
result.push({
195-
render: () =>
196-
this.renderContentAsset(
197-
compilation,
185+
);
186+
187+
compilation.chunkTemplate.hooks.renderManifest.tap(
188+
pluginName,
189+
(result, { chunk }) => {
190+
const { chunkGraph } = compilation;
191+
192+
const renderedModules = Array.from(
193+
this.getChunks(chunk, chunkGraph)
194+
).filter((module) => module.type === MODULE_TYPE);
195+
196+
const filenameTemplate =
197+
chunk.filenameTemplate || this.options.chunkFilename;
198+
199+
if (renderedModules.length > 0) {
200+
result.push({
201+
render: () =>
202+
this.renderContentAsset(
203+
compilation,
204+
chunk,
205+
renderedModules,
206+
compilation.runtimeTemplate.requestShortener
207+
),
208+
filenameTemplate,
209+
pathOptions: {
198210
chunk,
199-
renderedModules,
200-
compilation.runtimeTemplate.requestShortener
201-
),
202-
filenameTemplate,
203-
pathOptions: {
204-
chunk,
205-
contentHashType: MODULE_TYPE,
206-
},
207-
identifier: `${pluginName}.${chunk.id}`,
208-
hash: chunk.contentHash[MODULE_TYPE],
209-
});
211+
contentHashType: MODULE_TYPE,
212+
},
213+
identifier: `${pluginName}.${chunk.id}`,
214+
hash: chunk.contentHash[MODULE_TYPE],
215+
});
216+
}
210217
}
211-
}
212-
);
218+
);
219+
} else {
220+
compilation.hooks.renderManifest.tap(
221+
pluginName,
222+
(result, { chunk }) => {
223+
const { chunkGraph } = compilation;
224+
225+
const renderedModules = Array.from(
226+
this.getChunks(chunk, chunkGraph)
227+
).filter((module) => module.type === MODULE_TYPE);
228+
229+
const filenameTemplate =
230+
chunk.filenameTemplate || chunk.hasRuntime()
231+
? this.options.filename
232+
: this.options.chunkFilename;
233+
234+
if (renderedModules.length > 0) {
235+
result.push({
236+
render: () =>
237+
this.renderContentAsset(
238+
compilation,
239+
chunk,
240+
renderedModules,
241+
compilation.runtimeTemplate.requestShortener
242+
),
243+
filenameTemplate,
244+
pathOptions: {
245+
chunk,
246+
contentHashType: MODULE_TYPE,
247+
},
248+
identifier: `${pluginName}.${chunk.id}`,
249+
hash: chunk.contentHash[MODULE_TYPE],
250+
});
251+
}
252+
}
253+
);
254+
}
213255

214-
compilation.mainTemplate.hooks.hashForChunk.tap(
215-
pluginName,
216-
(hash, chunk) => {
256+
if (
257+
typeof webpack.javascript !== 'undefined' &&
258+
typeof webpack.javascript.JavascriptModulesPlugin !== 'undefined'
259+
) {
260+
webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(
261+
compilation
262+
).chunkHash.tap(pluginName, (chunk, hash) => {
217263
const { chunkFilename } = this.options;
218264

219265
if (REGEXP_CHUNKHASH.test(chunkFilename)) {
@@ -231,17 +277,40 @@ class MiniCssExtractPlugin {
231277
if (REGEXP_NAME.test(chunkFilename)) {
232278
hash.update(JSON.stringify(chunk.getChunkMaps(true).name));
233279
}
234-
}
235-
);
280+
});
281+
} else {
282+
compilation.mainTemplate.hooks.hashForChunk.tap(
283+
pluginName,
284+
(hash, chunk) => {
285+
const { chunkFilename } = this.options;
286+
287+
if (REGEXP_CHUNKHASH.test(chunkFilename)) {
288+
hash.update(JSON.stringify(chunk.getChunkMaps(true).hash));
289+
}
290+
291+
if (REGEXP_CONTENTHASH.test(chunkFilename)) {
292+
hash.update(
293+
JSON.stringify(
294+
chunk.getChunkMaps(true).contentHash[MODULE_TYPE] || {}
295+
)
296+
);
297+
}
298+
299+
if (REGEXP_NAME.test(chunkFilename)) {
300+
hash.update(JSON.stringify(chunk.getChunkMaps(true).name));
301+
}
302+
}
303+
);
304+
}
236305

237306
compilation.hooks.contentHash.tap(pluginName, (chunk) => {
238-
const { outputOptions } = compilation;
307+
const { outputOptions, chunkGraph } = compilation;
239308
const { hashFunction, hashDigest, hashDigestLength } = outputOptions;
240309
const hash = createHash(hashFunction);
241310

242-
for (const m of chunk.modulesIterable) {
311+
for (const m of this.getChunks(chunk, chunkGraph)) {
243312
if (m.type === MODULE_TYPE) {
244-
m.updateHash(hash);
313+
m.updateHash(hash, chunkGraph);
245314
}
246315
}
247316

@@ -255,7 +324,7 @@ class MiniCssExtractPlugin {
255324
const { mainTemplate } = compilation;
256325

257326
mainTemplate.hooks.localVars.tap(pluginName, (source, chunk) => {
258-
const chunkMap = this.getCssChunkObject(chunk);
327+
const chunkMap = this.getCssChunkObject(chunk, compilation);
259328

260329
if (Object.keys(chunkMap).length > 0) {
261330
return Template.asString([
@@ -276,17 +345,28 @@ class MiniCssExtractPlugin {
276345
mainTemplate.hooks.requireEnsure.tap(
277346
pluginName,
278347
(source, chunk, hash) => {
279-
const chunkMap = this.getCssChunkObject(chunk);
348+
const chunkMap = this.getCssChunkObject(chunk, compilation);
349+
const isWebpackNext = typeof webpack.RuntimeGlobals !== 'undefined';
280350

281351
if (Object.keys(chunkMap).length > 0) {
352+
const maintemplateObject = isWebpackNext
353+
? compilation
354+
: mainTemplate;
282355
const chunkMaps = chunk.getChunkMaps();
283-
const { crossOriginLoading } = mainTemplate.outputOptions;
284-
const linkHrefPath = mainTemplate.getAssetPath(
356+
const { crossOriginLoading } = maintemplateObject.outputOptions;
357+
const linkHrefPath = maintemplateObject.getAssetPath(
285358
JSON.stringify(this.options.chunkFilename),
286359
{
287-
hash: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`,
360+
hash: isWebpackNext
361+
? `" + ${webpack.RuntimeGlobals.getFullHash} + "`
362+
: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`,
288363
hashWithLength: (length) =>
289-
`" + ${mainTemplate.renderCurrentHashCode(hash, length)} + "`,
364+
isWebpackNext
365+
? `" + ${webpack.RuntimeGlobals.getFullHash} + "`
366+
: `" + ${mainTemplate.renderCurrentHashCode(
367+
hash,
368+
length
369+
)} + "`,
290370
chunk: {
291371
id: '" + chunkId + "',
292372
hash: `" + ${JSON.stringify(chunkMaps.hash)}[chunkId] + "`,
@@ -347,7 +427,11 @@ class MiniCssExtractPlugin {
347427
'promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) {',
348428
Template.indent([
349429
`var href = ${linkHrefPath};`,
350-
`var fullhref = ${mainTemplate.requireFn}.p + href;`,
430+
`var fullhref = ${
431+
isWebpackNext
432+
? '__webpack_require__'
433+
: mainTemplate.requireFn
434+
}.p + href;`,
351435
'var existingLinkTags = document.getElementsByTagName("link");',
352436
'for(var i = 0; i < existingLinkTags.length; i++) {',
353437
Template.indent([
@@ -408,11 +492,18 @@ class MiniCssExtractPlugin {
408492
});
409493
}
410494

411-
getCssChunkObject(mainChunk) {
495+
getChunks(chunk, chunkGraph) {
496+
return typeof chunkGraph !== 'undefined'
497+
? chunkGraph.getOrderedChunkModulesIterable(chunk)
498+
: chunk.modulesIterable;
499+
}
500+
501+
getCssChunkObject(mainChunk, compilation) {
412502
const obj = {};
503+
const { chunkGraph } = compilation;
413504

414505
for (const chunk of mainChunk.getAllAsyncChunks()) {
415-
for (const module of chunk.modulesIterable) {
506+
for (const module of this.getChunks(chunk, chunkGraph)) {
416507
if (module.type === MODULE_TYPE) {
417508
obj[chunk.id] = 1;
418509
break;
@@ -427,8 +518,12 @@ class MiniCssExtractPlugin {
427518
let usedModules;
428519

429520
const [chunkGroup] = chunk.groupsIterable;
521+
const moduleIndexFunctionName =
522+
typeof compilation.chunkGraph !== 'undefined'
523+
? 'getModulePostOrderIndex'
524+
: 'getModuleIndex2';
430525

431-
if (typeof chunkGroup.getModuleIndex2 === 'function') {
526+
if (typeof chunkGroup[moduleIndexFunctionName] === 'function') {
432527
// Store dependencies for modules
433528
const moduleDependencies = new Map(modules.map((m) => [m, new Set()]));
434529
const moduleDependenciesReasons = new Map(
@@ -443,7 +538,7 @@ class MiniCssExtractPlugin {
443538
.map((m) => {
444539
return {
445540
module: m,
446-
index: cg.getModuleIndex2(m),
541+
index: cg[moduleIndexFunctionName](m),
447542
};
448543
})
449544
// eslint-disable-next-line no-undefined

0 commit comments

Comments
 (0)