fix: allow to define the renderStage option lower than PROCESS_ASSETS_STAGE_SUMMARIZE, #137

webdiscus · webdiscus · commit 305dc4621d39 · 2025-01-13T11:12:52.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.12.2 (2025-01-13)
+
+- fix: allow to define the `renderStage` option lower than `PROCESS_ASSETS_STAGE_SUMMARIZE`, #137
+
 ## 4.12.1 (2025-01-12)
 
 - fix: incorrect output of preload tag if "crossorigin: true", #139
diff --git a/README.md b/README.md
@@ -2413,7 +2413,9 @@ Type: `null | number`
 Default: `Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER - 1`
 
 The [stage](https://webpack.js.org/api/compilation-hooks/#list-of-asset-processing-stages) to render output HTML in the [processAssets](https://webpack.js.org/api/compilation-hooks/#processassets) Webpack hook.
+<!--
 The  minimal possible stage for the rendering is `PROCESS_ASSETS_STAGE_SUMMARIZE`.
+-->
 
 For example:
 
@@ -2434,15 +2436,47 @@ module.exports = {
       entry: {
         index: 'src/index.html',
       },
-      // Ensures that the CompressionPlugin save the resulting HTML into the `*.html.gz` file
-      // after the rendering process in the HtmlBundlerPlugin.
+      // ensures that the CompressionPlugin save the resulting HTML into the `*.html.gz` file
+      // after the rendering process in the HtmlBundlerPlugin
       renderStage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_HASH + 1,
     }),
   ],
 };
 
 ```
 
+Other example with an optimization plugin:
+
+```js
+const path = require('path');
+const Compilation = require('webpack/lib/Compilation');
+const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
+const HtmlMinimizerPlugin = require('html-minimizer-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: 'src/index.html',
+      },
+      // ensures that the HTML rendering is called right before the HtmlMinimizerPlugin
+      renderStage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE - 1,
+    }),
+  ],
+  optimization: {
+    minimizer: [
+      // this plugin is called at the PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE stage
+      new HtmlMinimizerPlugin({}),
+    ],
+  },
+};
+
+```
+
 > [!TIP]
 > To ensures that the rendering process will be run after all optimizations and after all other plugins
 > set the `renderStage: Infinity + 1`.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.12.1",
+  "version": "4.12.2",
   "description": "Generates complete single-page or multi-page website from source assets. Build-in support for Markdown, Eta, EJS, Handlebars, Nunjucks, Pug. Alternative to html-webpack-plugin.",
   "keywords": [
     "html",
diff --git a/src/Plugin/Option.js b/src/Plugin/Option.js
@@ -739,9 +739,12 @@ class Option {
     let renderStage = this.options.renderStage || Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER - 1;
 
     // minimal possible stage for the rendering
-    if (renderStage < Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE) {
-      renderStage = Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE;
-    }
+    // TODO: research a really minimal possible stage,
+    //       because, e.g., html-minimizer-webpack-plugin uses the PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE stage,
+    //       and render must be called before this minimizer.
+    // if (renderStage < Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE) {
+    //   renderStage = Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE;
+    // }
 
     return renderStage;
   }
diff --git a/test/cases/option-preload-html-minimizer-renderStage/expected/css/home.b41afe39.css b/test/cases/option-preload-html-minimizer-renderStage/expected/css/home.b41afe39.css
diff --git a/test/cases/option-preload-html-minimizer-renderStage/expected/fonts/MaterialIcons-Regular.woff2 b/test/cases/option-preload-html-minimizer-renderStage/expected/fonts/MaterialIcons-Regular.woff2
diff --git a/test/cases/option-preload-html-minimizer-renderStage/expected/fonts/open-sans-regular.woff2 b/test/cases/option-preload-html-minimizer-renderStage/expected/fonts/open-sans-regular.woff2
diff --git a/test/cases/option-preload-html-minimizer-renderStage/expected/index.html b/test/cases/option-preload-html-minimizer-renderStage/expected/index.html
@@ -0,0 +1 @@
+<!doctype html><title>Home</title><meta name=viewport content="width=device-width initial-scale=1"><link rel=preload href=js/main.4a82793c.js as=script><link rel=preload href=css/home.b41afe39.css as=style><link rel=preload href=fonts/open-sans-regular.woff2 as=font type=font/woff2 crossorigin><link rel=preload href=fonts/MaterialIcons-Regular.woff2 as=font type=font/woff2 crossorigin><link href=css/home.b41afe39.css rel=stylesheet><script src=js/main.4a82793c.js></script><h1>Hello World!</h1>
diff --git a/test/cases/option-preload-html-minimizer-renderStage/expected/js/main.4a82793c.js b/test/cases/option-preload-html-minimizer-renderStage/expected/js/main.4a82793c.js
@@ -0,0 +1,5 @@
+/******/ (() => { // webpackBootstrap
+console.log('>> main.js');
+
+/******/ })()
+;
diff --git a/test/cases/option-preload-html-minimizer-renderStage/src/home.scss b/test/cases/option-preload-html-minimizer-renderStage/src/home.scss
@@ -0,0 +1,26 @@
+$color: orange;
+
+@font-face {
+  font-family: 'OpenSans';
+  src:
+    url('@fonts/OpenSans/open-sans-regular.woff2') format('woff2');
+  font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'MaterialIcons';
+  src:
+    url('@fonts/MaterialIcons/MaterialIcons-Regular.woff2') format('woff2');
+  font-style: normal;
+}
+
+h1 {
+  color: $color;
+  font-family: 'OpenSans', sans-serif;
+}
+
+.mi {
+  font-family: 'MaterialIcons';
+  font-size: 64px;
+}
diff --git a/test/cases/option-preload-html-minimizer-renderStage/src/index.html b/test/cases/option-preload-html-minimizer-renderStage/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Home</title>
+  <!-- TEST: correctly minify the content value, keep the space between parameters -->
+  <meta name="viewport" content="width=device-width initial-scale=1">
+  <link href="./home.scss" rel="stylesheet">
+  <script src="./main.js"></script>
+</head>
+<body>
+  <h1>Hello World!</h1>
+</body>
+</html>
diff --git a/test/cases/option-preload-html-minimizer-renderStage/src/main.js b/test/cases/option-preload-html-minimizer-renderStage/src/main.js
@@ -0,0 +1 @@
+console.log('>> main.js');
diff --git a/test/cases/option-preload-html-minimizer-renderStage/webpack.config.js b/test/cases/option-preload-html-minimizer-renderStage/webpack.config.js
@@ -0,0 +1,86 @@
+const path = require('path');
+const Compilation = require('webpack/lib/Compilation');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+import HtmlMinimizerPlugin from 'html-minimizer-webpack-plugin';
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  resolve: {
+    alias: {
+      '@fonts': path.join(__dirname, '../../fixtures/fonts'),
+    },
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/index.html',
+      },
+
+      js: {
+        filename: 'js/[name].[contenthash:8].js',
+      },
+
+      css: {
+        filename: 'css/[name].[contenthash:8].css',
+      },
+
+      preload: [
+        {
+          test: /\.(m?js)$/,
+          as: 'script',
+        },
+        {
+          test: /\.(s?css|less)$/,
+          as: 'style',
+        },
+        {
+          test: /\.(eot|ttf|woff2?)$/,
+          attributes: { as: 'font' },
+        },
+      ],
+
+      // use external minimizer
+      minify: false,
+
+      // test: call the HTML rendering before running of the HtmlMinimizerPlugin
+      renderStage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE - 1,
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(css|sass|scss)$/,
+        use: ['css-loader', 'sass-loader'],
+      },
+
+      {
+        test: /\.(eot|ttf|woff2?)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'fonts/[name][ext]',
+        },
+      },
+    ],
+  },
+
+  optimization: {
+    minimizer: [
+      // test: render HTML with `preload` option and an external minimizer
+      new HtmlMinimizerPlugin({
+        minify: HtmlMinimizerPlugin.swcMinify,
+        // https://github.com/swc-project/swc/blob/main/packages/html/index.ts
+        minimizerOptions: {
+          quotes: false,
+          tagOmission: true, // <= after minification removes head and body tags
+        },
+      }),
+    ],
+  },
+};
diff --git a/test/cases/option-preload-html-minimizer/webpack.config.js b/test/cases/option-preload-html-minimizer/webpack.config.js
@@ -1,4 +1,5 @@
 const path = require('path');
+const Compilation = require('webpack/lib/Compilation');
 const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
 import HtmlMinimizerPlugin from 'html-minimizer-webpack-plugin';
 
@@ -74,7 +75,7 @@ module.exports = {
         // https://github.com/swc-project/swc/blob/main/packages/html/index.ts
         minimizerOptions: {
           quotes: false,
-          tagOmission: false, // <= fix issue #137
+          tagOmission: false, // <= avoid removing heda and body tags, fix issue #137
         },
       }),
     ],
diff --git a/test/integration.test.js b/test/integration.test.js
@@ -179,6 +179,7 @@ describe('plugin option preload', () => {
   test('preload, no head closing tag', () => compareFiles('preload-no-head-close'));
   test('preload and minify', () => compareFiles('option-preload-minify'));
   test('preload and external html minimizer', () => compareFiles('option-preload-html-minimizer'));
+  test('preload and html minimizer using renderStage', () => compareFiles('option-preload-html-minimizer-renderStage'));
 
   // TODO: detect and remove unused split chinks
   //test('preload with split chunk', () => compareFiles('option-preload-split-chunk'));

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "html-bundler-webpack-plugin",`
`3`		`- "version": "4.12.1",`
	`3`	`+ "version": "4.12.2",`
`4`	`4`	`"description": "Generates complete single-page or multi-page website from source assets. Build-in support for Markdown, Eta, EJS, Handlebars, Nunjucks, Pug. Alternative to html-webpack-plugin.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"html",`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<!doctype html><title>Home</title><meta name=viewport content="width=device-width initial-scale=1"><link rel=preload href=js/main.4a82793c.js as=script><link rel=preload href=css/home.b41afe39.css as=style><link rel=preload href=fonts/open-sans-regular.woff2 as=font type=font/woff2 crossorigin><link rel=preload href=fonts/MaterialIcons-Regular.woff2 as=font type=font/woff2 crossorigin><link href=css/home.b41afe39.css rel=stylesheet><script src=js/main.4a82793c.js></script><h1>Hello World!</h1>`