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