fix: if filesystem cache is used, webpack stats or errors are not displayed, #115

Author: webdiscus

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change log
 
+## 4.1.3 (2024-10-28)
+
+- fix: if `filesystem` cache is used, webpack stats or errors are not displayed, #115
+- test: allow set the `stats.preset` webpack option to display stats info by testing 
+
 ## 4.1.2 (2024-10-21)
 
 - fix: issue `file is not resolved` after start->stop->start in serve/watch mode when used cache filesystem, #114

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "description": "HTML Bundler Plugin for Webpack renders HTML templates containing source files of scripts, styles, images. Supports template engines: Eta, EJS, Handlebars, Nunjucks, Pug, TwigJS. Alternative to html-webpack-plugin.",
   "keywords": [
     "html",
@@ -54,6 +54,7 @@
     "test:coverage": "jest --collectCoverage --config ./test/jest.config.js",
     "test:index": "jest --detectOpenHandles --config ./test/jest.config.js --runTestsByPath ./test/index.test.js",
     "test:issue": "jest --detectOpenHandles --config ./test/jest.config.js --runTestsByPath ./test/issue.test.js",
+    "test:messages": "jest --detectOpenHandles --config ./test/jest.config.js --runTestsByPath ./test/messages.test.js",
     "test:unit": "jest --detectOpenHandles --collectCoverage --config ./test/jest.config.js --runTestsByPath ./test/unit.test.js",
     "test:unitQueryParser": "jest --detectOpenHandles --collectCoverage --config ./test/jest.config.js --runTestsByPath ./test/unit.queryParser.test.js",
     "test:verbose": "jest --detectOpenHandles --config ./test/jest.config.js --runTestsByPath ./test/verbose.test.js",

src/Common/Helpers.js

@@ -27,6 +27,12 @@ const isFunction = (value) => typeof value === 'function';
  */
 const findPlugin = (plugins, name) => plugins.find((item) => item.constructor.name === name);
 
+/**
+ * Output to console.
+ *
+ * @param {*} args
+ * @return {boolean}
+ */
 const outToConsole = (...args) => process.stdout.write(args.join(' ') + '\n');
 
 /**

src/Loader/Messages/Exeptions.js

@@ -36,7 +36,7 @@ class LoaderException extends WebpackError {
   /**
    * @param {ObjectSerializerContext} context context
    */
-  static serialize(context) {
+  serialize(context) {
     const { write } = context;
 
     write(this.error);
@@ -48,7 +48,7 @@ class LoaderException extends WebpackError {
   /**
    * @param {ObjectDeserializerContext} context context
    */
-  static deserialize(context) {
+  deserialize(context) {
     const { read } = context;
 
     this.error = read();

src/Plugin/AssetCompiler.js

@@ -21,6 +21,7 @@ const Config = require('../Common/Config');
 const { baseUri, urlPathPrefix, cssLoaderName } = require('../Loader/Utils');
 const { findRootIssuer } = require('../Common/CompilationHelpers');
 const { isDir } = require('../Common/FileUtils');
+const { outToConsole } = require('../Common/Helpers');
 const createPersistentCache = require('./createPersistentCache');
 
 const CssExtractModule = require('./Modules/CssExtractModule');
@@ -319,7 +320,10 @@ class AssetCompiler {
         });
       });
 
-      compiler.cache.hooks.shutdown.tapAsync({ name: pluginName, stage: Cache.STAGE_DISK }, () => {
+      // note: if used `tapAsync` then no webpack statistics or errors will be displayed
+      // then use in the `done` hook the output of `stats.compilation.options.stats` in Promise.finally
+      //compiler.cache.hooks.shutdown.tapAsync({ name: pluginName, stage: Cache.STAGE_DISK }, () => {
+      compiler.cache.hooks.shutdown.tap({ name: pluginName, stage: Cache.STAGE_DISK }, () => {
         if (!isCached) {
           const cacheData = collectionCache.getData();
 
@@ -1538,6 +1542,12 @@ class AssetCompiler {
 
         compilation.name = compilationName(compilation.name, hasError);
 
+        // reserved for using `compiler.cache.hooks.shutdown.tapAsync` if used `filesystem` cache
+        // let statsOutput = stats.toString(stats.compilation.options.stats);
+        // if (statsOutput) {
+        //   outToConsole(statsOutput);
+        // }
+
         if (this.exceptions.size > 0) {
           const messages = Array.from(this.exceptions).join('\n\n');
           this.exceptions.clear();
@@ -1558,7 +1568,6 @@ class AssetCompiler {
    * Called when the compiler is closing or a watching compilation has stopped.
    */
   shutdown() {
-    //console.log('xxxx shutdown: ', {});
     PluginService.shutdown(this.compilation?.compiler);
   }
 }

test/cases/_pug/filter-markdown/webpack.config.js

@@ -3,7 +3,7 @@ const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
 
 module.exports = [
   {
-    name: 'config_2',
+    name: 'config_1',
     mode: 'production',
 
     output: {

test/cases/cache-filesystem-display-stats/expected/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Test</title>
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <script src="main.6ad9992e.js"></script>
+  </body>
+</html>

test/cases/cache-filesystem-display-stats/expected/main.6ad9992e.js

@@ -0,0 +1 @@
+console.log("Hello World! Test: 123");

test/cases/cache-filesystem-display-stats/src/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Test</title>
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <script src="main.js"></script>
+  </body>
+</html>

test/cases/cache-filesystem-display-stats/src/main.js

@@ -0,0 +1 @@
+console.log('Hello World! Test: 123');