Skip to content

Commit d65b37d

Browse files
committedSep 4, 2018
fix: Prevent chunks from beeing added multiple times
1 parent aede8c1 commit d65b37d

File tree

11 files changed

+59
-38
lines changed

11 files changed

+59
-38
lines changed
 

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -301,8 +301,8 @@ about which values are passed.
301301
AsyncSeriesWaterfallHook<{
302302
assets: {
303303
publicPath: string,
304-
js: Array<{entryName: string, path: string}>,
305-
css: Array<{entryName: string, path: string}>,
304+
js: Array<{string}>,
305+
css: Array<{string}>,
306306
favicon?: string | undefined,
307307
manifest?: string | undefined
308308
},
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Webpack App</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1"></head>
7+
<body>
8+
<script src="libMath.js"></script><script src="libText.js"></script><script src="vendors~entryA~entryB.js"></script><script src="entryA~entryB.js"></script><script src="entryA.js"></script><script src="entryB.js"></script></body>
9+
</html>

‎examples/chunk-optimization/webpack.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,9 @@ module.exports = {
4747
new HtmlWebpackPlugin({
4848
filename: 'entryB.html',
4949
chunks: ['entryB']
50+
}),
51+
new HtmlWebpackPlugin({
52+
filename: 'entryC.html'
5053
})
5154
]
5255
};

‎examples/inline/template.pug

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@ html
55
title #{htmlWebpackPlugin.options.title}
66
body
77
each cssFile in htmlWebpackPlugin.files.css
8-
style !{compilation.assets[cssFile.path.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
8+
style !{compilation.assets[cssFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
99
each jsFile in htmlWebpackPlugin.files.js
10-
script !{compilation.assets[jsFile.path.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
10+
script !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}

‎index.js

+35-26
Original file line numberDiff line numberDiff line change
@@ -327,8 +327,8 @@ class HtmlWebpackPlugin {
327327
* @param {WebpackCompilation} compilation
328328
* @param {{
329329
publicPath: string,
330-
js: Array<{entryName: string, path: string}>,
331-
css: Array<{entryName: string, path: string}>,
330+
js: Array<string>,
331+
css: Array<string>,
332332
manifest?: string,
333333
favicon?: string
334334
}} assets
@@ -357,8 +357,8 @@ class HtmlWebpackPlugin {
357357
* @param {(templatePArameters) => string | Promise<string>} templateFunction
358358
* @param {{
359359
publicPath: string,
360-
js: Array<{entryName: string, path: string}>,
361-
css: Array<{entryName: string, path: string}>,
360+
js: Array<string>,
361+
css: Array<string>,
362362
manifest?: string,
363363
favicon?: string
364364
}} assets
@@ -488,14 +488,14 @@ class HtmlWebpackPlugin {
488488
*
489489
* @param {{
490490
publicPath: string,
491-
js: Array<{entryName: string, path: string}>,
492-
css: Array<{entryName: string, path: string}>,
491+
js: Array<string>,
492+
css: Array<string>,
493493
manifest?: string,
494494
favicon?: string
495495
}} assets
496496
*/
497497
isHotUpdateCompilation (assets) {
498-
return assets.js.length && assets.js.every(({entryName}) => /\.hot-update\.js$/.test(entryName));
498+
return assets.js.length && assets.js.every((assetPath) => /\.hot-update\.js$/.test(assetPath));
499499
}
500500

501501
/**
@@ -505,8 +505,8 @@ class HtmlWebpackPlugin {
505505
* @param {string[]} entryNames
506506
* @returns {{
507507
publicPath: string,
508-
js: Array<{entryName: string, path: string}>,
509-
css: Array<{entryName: string, path: string}>,
508+
js: Array<string>,
509+
css: Array<string>,
510510
manifest?: string,
511511
favicon?: string
512512
}}
@@ -533,8 +533,8 @@ class HtmlWebpackPlugin {
533533
/**
534534
* @type {{
535535
publicPath: string,
536-
js: Array<{entryName: string, path: string}>,
537-
css: Array<{entryName: string, path: string}>,
536+
js: Array<string>,
537+
css: Array<string>,
538538
manifest?: string,
539539
favicon?: string
540540
}}
@@ -558,6 +558,7 @@ class HtmlWebpackPlugin {
558558
}
559559

560560
// Extract paths to .js and .css files from the current compilation
561+
const entryPointPublicPathMap = {};
561562
const extensionRegexp = /\.(css|js)(\?|$)/;
562563
for (let i = 0; i < entryNames.length; i++) {
563564
const entryName = entryNames[i];
@@ -573,18 +574,21 @@ class HtmlWebpackPlugin {
573574
: entryPointPublicPath;
574575
});
575576

576-
entryPointPublicPaths.forEach((entryPointPublicPaths) => {
577-
const extMatch = extensionRegexp.exec(entryPointPublicPaths);
577+
entryPointPublicPaths.forEach((entryPointPublicPath) => {
578+
const extMatch = extensionRegexp.exec(entryPointPublicPath);
578579
// Skip if the public path is not a .css or .js file
579580
if (!extMatch) {
580581
return;
581582
}
583+
// Skip if this file is already known
584+
// (e.g. because of common chunk optimizations)
585+
if (entryPointPublicPathMap[entryPointPublicPath]) {
586+
return;
587+
}
588+
entryPointPublicPathMap[entryPointPublicPath] = true;
582589
// ext will contain .js or .css
583590
const ext = extMatch[1];
584-
assets[ext].push({
585-
entryName: entryName,
586-
path: entryPointPublicPaths
587-
});
591+
assets[ext].push(entryPointPublicPath);
588592
});
589593
}
590594
return assets;
@@ -650,32 +654,30 @@ class HtmlWebpackPlugin {
650654

651655
/**
652656
* Generate all tags script for the given file paths
653-
* @param {Array<{ entryName: string; path: string; }>} jsAssets
657+
* @param {Array<string>} jsAssets
654658
* @returns {Array<HtmlTagObject>}
655659
*/
656660
generatedScriptTags (jsAssets) {
657661
return jsAssets.map(scriptAsset => ({
658662
tagName: 'script',
659663
voidTag: false,
660-
entry: scriptAsset.entryName,
661664
attributes: {
662-
src: scriptAsset.path
665+
src: scriptAsset
663666
}
664667
}));
665668
}
666669

667670
/**
668671
* Generate all style tags for the given file paths
669-
* @param {Array<{ entryName: string; path: string; }>} cssAssets
672+
* @param {Array<string>} cssAssets
670673
* @returns {Array<HtmlTagObject>}
671674
*/
672675
generateStyleTags (cssAssets) {
673676
return cssAssets.map(styleAsset => ({
674677
tagName: 'link',
675678
voidTag: true,
676-
entry: styleAsset.entryName,
677679
attributes: {
678-
href: styleAsset.path,
680+
href: styleAsset,
679681
rel: 'stylesheet'
680682
}
681683
}));
@@ -879,8 +881,8 @@ class HtmlWebpackPlugin {
879881
* @param {WebpackCompilation} compilation
880882
* @param {{
881883
publicPath: string,
882-
js: Array<{entryName: string, path: string}>,
883-
css: Array<{entryName: string, path: string}>,
884+
js: Array<string>,
885+
css: Array<string>,
884886
manifest?: string,
885887
favicon?: string
886888
}} assets
@@ -892,6 +894,13 @@ class HtmlWebpackPlugin {
892894
* @returns {HtmlWebpackPluginTemplateParameter}
893895
*/
894896
function templateParametersGenerator (compilation, assets, assetTags, options) {
897+
const xhtml = options.xhtml;
898+
assetTags.headTags.toString = function () {
899+
return this.map((assetTagObject) => htmlTagObjectToString(assetTagObject, xhtml)).join('');
900+
};
901+
assetTags.bodyTags.toString = function () {
902+
return this.map((assetTagObject) => htmlTagObjectToString(assetTagObject, xhtml)).join('');
903+
};
895904
return {
896905
compilation: compilation,
897906
webpackConfig: compilation.options,
@@ -912,7 +921,7 @@ HtmlWebpackPlugin.version = 4;
912921
/**
913922
* A static helper to get the hooks for this plugin
914923
*
915-
* Usage: HtmlWebpackPlugin.getHook(compilation, 'HookName').tap('YourPluginName', () => { ... });
924+
* Usage: HtmlWebpackPlugin.getHooks(compilation).HOOK_NAME.tapAsync('YourPluginName', () => { ... });
916925
*/
917926
HtmlWebpackPlugin.getHooks = getHtmlWebpackPluginHooks;
918927
HtmlWebpackPlugin.createHtmlTagObject = createHtmlTagObject;

‎lib/hooks.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
2020
AsyncSeriesWaterfallHook<{
2121
assets: {
2222
publicPath: string,
23-
js: Array<{entryName: string, path: string}>,
24-
css: Array<{entryName: string, path: string}>,
23+
js: Array<string>,
24+
css: Array<string>,
2525
favicon?: string | undefined,
2626
manifest?: string | undefined
2727
},

‎spec/basic.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1243,7 +1243,7 @@ describe('HtmlWebpackPlugin', () => {
12431243
compiler.plugin('compilation', compilation => {
12441244
HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
12451245
eventFired = true;
1246-
object.assets.js.push({path: 'funky-script.js'});
1246+
object.assets.js.push('funky-script.js');
12471247
callback();
12481248
});
12491249
});

‎spec/fixtures/template.pug

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ html
66
body
77
p Some unique text
88
each jsFile in htmlWebpackPlugin.files.js
9-
script(src!=jsFile.path)
9+
script(src!=jsFile)

‎spec/fixtures/test.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
</head>
77
<body>
88
<p>Some unique text</p>
9-
<script src="<%=htmlWebpackPlugin.files.js[0].path%>"></script>
9+
<script src="<%=htmlWebpackPlugin.files.js[0]%>"></script>
1010
</body>
1111
</html>

‎spec/fixtures/webpackconfig.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
</head>
77
<body>
88
<p>Public path is <%= webpackConfig.output.publicPath %></p>
9-
<script src="<%= htmlWebpackPlugin.files.js[0].path %></script>
9+
<script src="<%= htmlWebpackPlugin.files.js[0] %></script>
1010
</body>
1111
</html>

‎typings.d.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -128,8 +128,8 @@ interface HtmlWebpackPluginTemplateParameter {
128128
},
129129
files: {
130130
publicPath: string,
131-
js: Array<{entryName: string, path: string}>,
132-
css: Array<{entryName: string, path: string}>,
131+
js: Array<string>,
132+
css: Array<string>,
133133
manifest?: string,
134134
favicon?: string
135135
},

0 commit comments

Comments
 (0)
Please sign in to comment.