Skip to content

Commit

Permalink
refactor: Change the structure of the internal assets object
Browse files Browse the repository at this point in the history
Adapt structure in preparation for the webpack 4 entry api

BREAKING CHANGE: The assets object which is used for the template parameters and inside hooks was changed. The chunks property was removed and the js and css property was converted from a string into an object `{ entryName: string, path: string}`
  • Loading branch information
jantimon committed Jun 3, 2018
1 parent 55313be commit 37db086
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 23 deletions.
4 changes: 2 additions & 2 deletions examples/inline/template.jade
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@ html
title #{htmlWebpackPlugin.options.title}
body
each cssFile in htmlWebpackPlugin.files.css
style !{compilation.assets[cssFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
style !{compilation.assets[cssFile.path.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
each jsFile in htmlWebpackPlugin.files.js
script !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
script !{compilation.assets[jsFile.path.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
50 changes: 35 additions & 15 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -434,6 +434,18 @@ class HtmlWebpackPlugin {
return assets.js.length && assets.js.every(name => /\.hot-update\.js$/.test(name));
}

/**
*
* @param {WebpackCompilation} compilation
* @param {any} chunks
* @returns {{
publicPath: string,
js: Array<{entryName: string, path: string}>,
css: Array<{entryName: string, path: string}>,
manifest: string,
favicon?: string
}}
*/
htmlWebpackPluginAssets (compilation, chunks) {
const compilationHash = compilation.hash;

Expand All @@ -449,11 +461,18 @@ class HtmlWebpackPlugin {
publicPath += '/';
}

/**
* @type {{
publicPath: string,
js: Array<{entryName: string, path: string}>,
css: Array<{entryName: string, path: string}>,
manifest: string,
favicon?: string
}}
*/
const assets = {
// The public path
publicPath: publicPath,
// Will contain all js & css files by chunk
chunks: {},
// Will contain all js files
js: [],
// Will contain all css files
Expand All @@ -465,15 +484,12 @@ class HtmlWebpackPlugin {
// Append a hash for cache busting
if (this.options.hash) {
assets.manifest = this.appendHash(assets.manifest, compilationHash);
assets.favicon = this.appendHash(assets.favicon, compilationHash);
}

for (let i = 0; i < chunks.length; i++) {
const chunk = chunks[i];
const chunkName = chunk.names[0];

assets.chunks[chunkName] = {};

// Prepend the public path to all chunk files
let chunkFiles = [].concat(chunk.files).map(chunkFile => publicPath + chunkFile);

Expand All @@ -486,16 +502,20 @@ class HtmlWebpackPlugin {
// or when one chunk hosts js and css simultaneously
const js = chunkFiles.find(chunkFile => /.js($|\?)/.test(chunkFile));
if (js) {
assets.chunks[chunkName].size = chunk.size;
assets.chunks[chunkName].entry = js;
assets.chunks[chunkName].hash = chunk.hash;
assets.js.push(js);
assets.js.push({
entryName: chunkName,
path: js
});
}

// Gather all css files
const css = chunkFiles.filter(chunkFile => /.css($|\?)/.test(chunkFile));
assets.chunks[chunkName].css = css;
assets.css = assets.css.concat(css);
css.forEach((cssPath) => {
assets.css.push({
entryName: chunkName,
path: cssPath
});
});
}

// Duplicate css assets can occur on occasion if more than one chunk
Expand Down Expand Up @@ -552,19 +572,19 @@ class HtmlWebpackPlugin {
*/
generateHtmlTagObjects (assets) {
// Turn script files into script tags
const scripts = assets.js.map(scriptPath => ({
const scripts = assets.js.map(scriptAsset => ({
tagName: 'script',
voidTag: false,
attributes: {
src: scriptPath
src: scriptAsset.path
}
}));
// Turn css files into link tags
const styles = assets.css.map(stylePath => ({
const styles = assets.css.map(styleAsset => ({
tagName: 'link',
voidTag: true,
attributes: {
href: stylePath,
href: styleAsset.path,
rel: 'stylesheet'
}
}));
Expand Down
6 changes: 3 additions & 3 deletions spec/BasicSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,7 @@ describe('HtmlWebpackPlugin', function () {
}, [{
type: 'chunkhash',
chunkName: 'app',
containStr: '<script src="app_bundle.js?%chunkhash%"'
containStr: '<script src="app_bundle.js'
}], null, done);
});

Expand Down Expand Up @@ -1195,7 +1195,7 @@ describe('HtmlWebpackPlugin', function () {
compiler.plugin('compilation', function (compilation) {
tapCompilationEvent(compilation, 'html-webpack-plugin-before-html-processing', function (object, callback) {
eventFired = true;
object.assets.js.push('funky-script.js');
object.assets.js.push({path: 'funky-script.js'});
object.html += 'Injected by plugin';
callback();
});
Expand Down Expand Up @@ -1230,7 +1230,7 @@ describe('HtmlWebpackPlugin', function () {
compiler.plugin('compilation', function (compilation) {
tapCompilationEvent(compilation, 'html-webpack-plugin-before-html-generation', function (object, callback) {
eventFired = true;
object.assets.js.push('funky-script.js');
object.assets.js.push({path: 'funky-script.js'});
callback();
});
});
Expand Down
2 changes: 1 addition & 1 deletion spec/fixtures/template.jade
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@ html
body
p Some unique text
each jsFile in htmlWebpackPlugin.files.js
script(src!=jsFile)
script(src!=jsFile.path)
2 changes: 1 addition & 1 deletion spec/fixtures/test.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@
</head>
<body>
<p>Some unique text</p>
<script src="<%=htmlWebpackPlugin.files.chunks.app.entry%>"></script>
<script src="<%=htmlWebpackPlugin.files.js[0].path%>"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion spec/fixtures/webpackconfig.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@
</head>
<body>
<p>Public path is <%= webpackConfig.output.publicPath %></p>
<script src="<%= htmlWebpackPlugin.files.chunks.app.entry %>?<%= htmlWebpackPlugin.files.chunks.app.hash %>"></script>
<script src="<%= htmlWebpackPlugin.files.js[0].path %></script>
</body>
</html>

0 comments on commit 37db086

Please sign in to comment.