refactor: Change the structure of the internal assets object

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}`

examples/inline/template.jade

@@ -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()}

index.js

@@ -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;
 
@@ -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
@@ -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);
 
@@ -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
@@ -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'
       }
     }));

spec/BasicSpec.js

@@ -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);
   });
 
@@ -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();
           });
@@ -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();
           });
         });

spec/fixtures/template.jade

@@ -6,4 +6,4 @@ html
   body
     p Some unique text
     each jsFile in htmlWebpackPlugin.files.js
-      script(src!=jsFile)
+      script(src!=jsFile.path)

spec/fixtures/test.html

@@ -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>

spec/fixtures/webpackconfig.html

@@ -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>