Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix: Prevent chunks from beeing added multiple times
  • Loading branch information
jantimon committed Sep 4, 2018
1 parent aede8c1 commit d65b37d
Show file tree
Hide file tree
Showing 11 changed files with 59 additions and 38 deletions.
4 changes: 2 additions & 2 deletions README.md
Expand Up @@ -301,8 +301,8 @@ about which values are passed.
AsyncSeriesWaterfallHook<{
assets: {
publicPath: string,
js: Array<{entryName: string, path: string}>,
css: Array<{entryName: string, path: string}>,
js: Array<{string}>,
css: Array<{string}>,
favicon?: string | undefined,
manifest?: string | undefined
},
Expand Down
9 changes: 9 additions & 0 deletions examples/chunk-optimization/dist/webpack-4/entryC.html
@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></head>
<body>
<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>
</html>
3 changes: 3 additions & 0 deletions examples/chunk-optimization/webpack.config.js
Expand Up @@ -47,6 +47,9 @@ module.exports = {
new HtmlWebpackPlugin({
filename: 'entryB.html',
chunks: ['entryB']
}),
new HtmlWebpackPlugin({
filename: 'entryC.html'
})
]
};
4 changes: 2 additions & 2 deletions examples/inline/template.pug
Expand Up @@ -5,6 +5,6 @@ html
title #{htmlWebpackPlugin.options.title}
body
each cssFile in htmlWebpackPlugin.files.css
style !{compilation.assets[cssFile.path.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
style !{compilation.assets[cssFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
each jsFile in htmlWebpackPlugin.files.js
script !{compilation.assets[jsFile.path.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
script !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
61 changes: 35 additions & 26 deletions index.js
Expand Up @@ -327,8 +327,8 @@ class HtmlWebpackPlugin {
* @param {WebpackCompilation} compilation
* @param {{
publicPath: string,
js: Array<{entryName: string, path: string}>,
css: Array<{entryName: string, path: string}>,
js: Array<string>,
css: Array<string>,
manifest?: string,
favicon?: string
}} assets
Expand Down Expand Up @@ -357,8 +357,8 @@ class HtmlWebpackPlugin {
* @param {(templatePArameters) => string | Promise<string>} templateFunction
* @param {{
publicPath: string,
js: Array<{entryName: string, path: string}>,
css: Array<{entryName: string, path: string}>,
js: Array<string>,
css: Array<string>,
manifest?: string,
favicon?: string
}} assets
Expand Down Expand Up @@ -488,14 +488,14 @@ class HtmlWebpackPlugin {
*
* @param {{
publicPath: string,
js: Array<{entryName: string, path: string}>,
css: Array<{entryName: string, path: string}>,
js: Array<string>,
css: Array<string>,
manifest?: string,
favicon?: string
}} assets
*/
isHotUpdateCompilation (assets) {
return assets.js.length && assets.js.every(({entryName}) => /\.hot-update\.js$/.test(entryName));
return assets.js.length && assets.js.every((assetPath) => /\.hot-update\.js$/.test(assetPath));
}

/**
Expand All @@ -505,8 +505,8 @@ class HtmlWebpackPlugin {
* @param {string[]} entryNames
* @returns {{
publicPath: string,
js: Array<{entryName: string, path: string}>,
css: Array<{entryName: string, path: string}>,
js: Array<string>,
css: Array<string>,
manifest?: string,
favicon?: string
}}
Expand All @@ -533,8 +533,8 @@ class HtmlWebpackPlugin {
/**
* @type {{
publicPath: string,
js: Array<{entryName: string, path: string}>,
css: Array<{entryName: string, path: string}>,
js: Array<string>,
css: Array<string>,
manifest?: string,
favicon?: string
}}
Expand All @@ -558,6 +558,7 @@ class HtmlWebpackPlugin {
}

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

entryPointPublicPaths.forEach((entryPointPublicPaths) => {
const extMatch = extensionRegexp.exec(entryPointPublicPaths);
entryPointPublicPaths.forEach((entryPointPublicPath) => {
const extMatch = extensionRegexp.exec(entryPointPublicPath);
// Skip if the public path is not a .css or .js file
if (!extMatch) {
return;
}
// Skip if this file is already known
// (e.g. because of common chunk optimizations)
if (entryPointPublicPathMap[entryPointPublicPath]) {
return;
}
entryPointPublicPathMap[entryPointPublicPath] = true;
// ext will contain .js or .css
const ext = extMatch[1];
assets[ext].push({
entryName: entryName,
path: entryPointPublicPaths
});
assets[ext].push(entryPointPublicPath);
});
}
return assets;
Expand Down Expand Up @@ -650,32 +654,30 @@ class HtmlWebpackPlugin {

/**
* Generate all tags script for the given file paths
* @param {Array<{ entryName: string; path: string; }>} jsAssets
* @param {Array<string>} jsAssets
* @returns {Array<HtmlTagObject>}
*/
generatedScriptTags (jsAssets) {
return jsAssets.map(scriptAsset => ({
tagName: 'script',
voidTag: false,
entry: scriptAsset.entryName,
attributes: {
src: scriptAsset.path
src: scriptAsset
}
}));
}

/**
* Generate all style tags for the given file paths
* @param {Array<{ entryName: string; path: string; }>} cssAssets
* @param {Array<string>} cssAssets
* @returns {Array<HtmlTagObject>}
*/
generateStyleTags (cssAssets) {
return cssAssets.map(styleAsset => ({
tagName: 'link',
voidTag: true,
entry: styleAsset.entryName,
attributes: {
href: styleAsset.path,
href: styleAsset,
rel: 'stylesheet'
}
}));
Expand Down Expand Up @@ -879,8 +881,8 @@ class HtmlWebpackPlugin {
* @param {WebpackCompilation} compilation
* @param {{
publicPath: string,
js: Array<{entryName: string, path: string}>,
css: Array<{entryName: string, path: string}>,
js: Array<string>,
css: Array<string>,
manifest?: string,
favicon?: string
}} assets
Expand All @@ -892,6 +894,13 @@ class HtmlWebpackPlugin {
* @returns {HtmlWebpackPluginTemplateParameter}
*/
function templateParametersGenerator (compilation, assets, assetTags, options) {
const xhtml = options.xhtml;
assetTags.headTags.toString = function () {
return this.map((assetTagObject) => htmlTagObjectToString(assetTagObject, xhtml)).join('');
};
assetTags.bodyTags.toString = function () {
return this.map((assetTagObject) => htmlTagObjectToString(assetTagObject, xhtml)).join('');
};
return {
compilation: compilation,
webpackConfig: compilation.options,
Expand All @@ -912,7 +921,7 @@ HtmlWebpackPlugin.version = 4;
/**
* A static helper to get the hooks for this plugin
*
* Usage: HtmlWebpackPlugin.getHook(compilation, 'HookName').tap('YourPluginName', () => { ... });
* Usage: HtmlWebpackPlugin.getHooks(compilation).HOOK_NAME.tapAsync('YourPluginName', () => { ... });
*/
HtmlWebpackPlugin.getHooks = getHtmlWebpackPluginHooks;
HtmlWebpackPlugin.createHtmlTagObject = createHtmlTagObject;
Expand Down
4 changes: 2 additions & 2 deletions lib/hooks.js
Expand Up @@ -20,8 +20,8 @@ const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
AsyncSeriesWaterfallHook<{
assets: {
publicPath: string,
js: Array<{entryName: string, path: string}>,
css: Array<{entryName: string, path: string}>,
js: Array<string>,
css: Array<string>,
favicon?: string | undefined,
manifest?: string | undefined
},
Expand Down
2 changes: 1 addition & 1 deletion spec/basic.spec.js
Expand Up @@ -1243,7 +1243,7 @@ describe('HtmlWebpackPlugin', () => {
compiler.plugin('compilation', compilation => {
HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync('HtmlWebpackPluginTest', (object, callback) => {
eventFired = true;
object.assets.js.push({path: 'funky-script.js'});
object.assets.js.push('funky-script.js');
callback();
});
});
Expand Down
2 changes: 1 addition & 1 deletion spec/fixtures/template.pug
Expand Up @@ -6,4 +6,4 @@ html
body
p Some unique text
each jsFile in htmlWebpackPlugin.files.js
script(src!=jsFile.path)
script(src!=jsFile)
2 changes: 1 addition & 1 deletion spec/fixtures/test.html
Expand Up @@ -6,6 +6,6 @@
</head>
<body>
<p>Some unique text</p>
<script src="<%=htmlWebpackPlugin.files.js[0].path%>"></script>
<script src="<%=htmlWebpackPlugin.files.js[0]%>"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion spec/fixtures/webpackconfig.html
Expand Up @@ -6,6 +6,6 @@
</head>
<body>
<p>Public path is <%= webpackConfig.output.publicPath %></p>
<script src="<%= htmlWebpackPlugin.files.js[0].path %></script>
<script src="<%= htmlWebpackPlugin.files.js[0] %></script>
</body>
</html>
4 changes: 2 additions & 2 deletions typings.d.ts
Expand Up @@ -128,8 +128,8 @@ interface HtmlWebpackPluginTemplateParameter {
},
files: {
publicPath: string,
js: Array<{entryName: string, path: string}>,
css: Array<{entryName: string, path: string}>,
js: Array<string>,
css: Array<string>,
manifest?: string,
favicon?: string
},
Expand Down

0 comments on commit d65b37d

Please sign in to comment.