fix: use new webpack 5 api to extract assets from child compilation

jantimon · Jan 20, 2021 · 1b59e09 · 1b59e09
1 parent e6e34fd
commit 1b59e09
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 33 deletions.
diff --git a/examples/javascript/dist/webpack-5/index.html b/examples/javascript/dist/webpack-5/index.html
@@ -1 +1 @@
-<head><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head>Hello World from backend2020-10-14T14:25:45.361Z<h2>Partial</h2><img src="0714810ae3fb211173e2964249507195.png">
+<head><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head>Hello World from backend2020-10-14T15:07:03.011Z<h2>Partial</h2><img src="0714810ae3fb211173e2964249507195.png">
diff --git a/lib/child-compiler.js b/lib/child-compiler.js
@@ -16,6 +16,7 @@ const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
 const LoaderTargetPlugin = require('webpack/lib/LoaderTargetPlugin');
 const LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin');
 const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
+const Compilation = require('webpack').Compilation;
 
 /**
  * The HtmlWebpackChildCompiler is a helper to allow reusing one childCompiler
@@ -100,17 +101,38 @@ class HtmlWebpackChildCompiler {
     new LibraryTemplatePlugin('HTML_WEBPACK_PLUGIN_RESULT', 'var').apply(childCompiler);
     new LoaderTargetPlugin('node').apply(childCompiler);
 
+    // Generate output file names
+    const temporaryTemplateNames = this.templates.map((template, index) => `__child-HtmlWebpackPlugin_${index}-${template}`);
+
     // Add all templates
     this.templates.forEach((template, index) => {
-      new SingleEntryPlugin(childCompiler.context, template, `HtmlWebpackPlugin_${index}`).apply(childCompiler);
+      new SingleEntryPlugin(childCompiler.context, template, `HtmlWebpackPlugin_${index}-${template}`).apply(childCompiler);
     });
 
     this.compilationStartedTimestamp = new Date().getTime();
     this.compilationPromise = new Promise((resolve, reject) => {
+      const extractedAssets = [];
+      childCompiler.hooks.compilation.tap('HtmlWebpackPlugin', (compilation) => {
+        compilation.hooks.processAssets.tap(
+          {
+            name: 'HtmlWebpackPlugin',
+            stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+          },
+          (assets) => {
+            temporaryTemplateNames.forEach((temporaryTemplateName) => {
+              if (assets[temporaryTemplateName]) {
+                extractedAssets.push(assets[temporaryTemplateName]);
+                compilation.deleteAsset(temporaryTemplateName);
+              }
+            });
+          }
+        );
+      });
+
       childCompiler.runAsChild((err, entries, childCompilation) => {
         // Extract templates
         const compiledTemplates = entries
-          ? extractHelperFilesFromCompilation(mainCompilation, childCompilation, outputOptions.filename, entries)
+          ? extractedAssets.map((asset) => asset.source())
           : [];
         // Extract file dependencies
         if (entries) {
@@ -159,36 +181,6 @@ class HtmlWebpackChildCompiler {
   }
 }
 
-/**
- * The webpack child compilation will create files as a side effect.
- * This function will extract them and clean them up so they won't be written to disk.
- *
- * Returns the source code of the compiled templates as string
- *
- * @returns Array<string>
- */
-function extractHelperFilesFromCompilation (mainCompilation, childCompilation, filename, childEntryChunks) {
-  const helperAssetNames = childEntryChunks.map((entryChunk, index) => {
-    const entryConfig = {
-      hash: childCompilation.hash,
-      chunk: entryChunk,
-      name: `HtmlWebpackPlugin_${index}`
-    };
-
-    return mainCompilation.getAssetPath(filename, entryConfig);
-  });
-
-  helperAssetNames.forEach((helperFileName) => {
-    delete mainCompilation.assets[helperFileName];
-  });
-
-  const helperContents = helperAssetNames.map((helperFileName) => {
-    return childCompilation.assets[helperFileName].source();
-  });
-
-  return helperContents;
-}
-
 module.exports = {
   HtmlWebpackChildCompiler
 };