fix: add Exception when used splitChunks and occurs the error: cannot resolve a CSS file in template

webdiscus · webdiscus · commit 50536c494b16 · 2024-11-18T21:53:55.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Change log
 
+## 4.4.2 (2024-11-18)
+
+- fix: add Exception when used `splitChunks` and occurs the error: Can't resolve a CSS file in template.
+- fix: correct Exception message when a source CSS file is not found 
+
 ## 4.4.1 (2024-11-05)
 
 - fix: if used multiple config and cache `filesystem`, occurs the error 'PersistentCache is already registered'
diff --git a/README.md b/README.md
@@ -1933,7 +1933,7 @@ module.exports = {
     splitChunks: {
       cacheGroups: {
         scripts: {
-          test: /\.(js|ts)$/, // <= IMPORTANT: split only JS files
+          test: /\.(js|ts)$/, // <= IMPORTANT: split only script files
           chunks: 'all',
         },
       },
@@ -6217,7 +6217,7 @@ module.exports = {
     splitChunks: {
       cacheGroups: {
         scripts: {
-          test: /\.(js|ts)$/,
+          test: /\.(js|ts)$/, // <= IMPORTANT: split only script files
           chunks: 'all',
         },
       },
@@ -6262,7 +6262,7 @@ module.exports = {
     splitChunks: {
       cacheGroups: {
         vendor: {
-          test: /[\\/]node_modules[\\/].+\.(js|ts)$/, // use exactly this Regexp
+          test: /[\\/]node_modules[\\/].+\.(js|ts)$/, // <= IMPORTANT: split only script files
           name: 'vendor',
           chunks: 'all',
         },
@@ -6334,8 +6334,8 @@ module.exports = {
       maxSize: 1000000, // split chunks bigger than 100KB, defaults is 20KB
       cacheGroups: {
         app: {
-          test: /\.(js|ts)$/, // split only JS files
-          chunks: 'all', // <- use it only in cache groups
+          test: /\.(js|ts)$/, // <= IMPORTANT: split only script files
+          chunks: 'all', // <= use it only in cache groups
           name({ context }, chunks, groupName) {
             // save split chunks of the node module under package name
             if (/[\\/]node_modules[\\/]/.test(context)) {
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.4.1",
+  "version": "4.4.2",
   "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",
diff --git a/src/Plugin/Messages/Exception.js b/src/Plugin/Messages/Exception.js
@@ -74,9 +74,10 @@ const optionPreloadAsException = (config, type, availableTypes) => {
  * @param {string} file The unresolved file can be absolute or relative.
  * @param {string} issuer The absolute issuer file of unresolved file.
  * @param {string} rootContext The absolute path to project files.
+ * @param {object} pluginOptions The instance of the pluginOptions.
  * @throws {Error}
  */
-const resolveException = (file, issuer, rootContext) => {
+const resolveException = (file, issuer, rootContext, pluginOptions) => {
   let isExistsFile = true;
   issuer = path.relative(rootContext, issuer);
 
@@ -88,7 +89,7 @@ const resolveException = (file, issuer, rootContext) => {
 
   if (!isExistsFile) {
     message = `File ${yellow(file)} not found in ${cyan(issuer)}`;
-  } else if (/\.css$/.test(file) && file.indexOf('??ruleSet')) {
+  } else if (/\.css$/.test(file) && file.includes('??ruleSet')) {
     message +=
       `\nThe handling of ${yellow`@import at-rules in CSS`} is not supported. Disable the 'import' option in 'css-loader':\n` +
       white`
@@ -98,16 +99,50 @@ const resolveException = (file, issuer, rootContext) => {
     {
       loader: 'css-loader',
       options: {
-        import: false, // disable @import at-rules handling
+        import: false, ${white`// disable @import at-rules handling`}
       },
     },
   ],
 },`;
+  } else if (pluginOptions.isStyle(file) && hasSplitChunksCacheGroups(pluginOptions.webpackOptions)) {
+    message += `\n
+${whiteBright.bgGreen` Tip `} 
+Add the ${white`'splitChunks.cacheGroups.{cacheGroup}.test'`} option as a RegExp to each cache group to split only script files, excluding styles.
+For example:
+
+optimization: {
+  splitChunks: {
+    minSize: 1000,
+    cacheGroups: {
+      default: {
+        test: /.+\.(js|ts)$/, ${white`// split only scripts, excluding style files`}
+        name: 'common',
+        chunks: 'all',
+      },
+      vendors: {
+        test: /[\\/]node_modules[\\/].+\.(js|ts)$/, ${white`// split only scripts, excluding style files`}
+        name: 'vendor',
+        chunks: 'all',
+      },
+    },
+  },
+},
+`;
   }
 
   throw new PluginException(message);
 };
 
+/**
+ * Detect whether Webpack config contains `splitChunks.cacheGroups` option.
+ *
+ * @param webpackOptions
+ * @return {boolean}
+ */
+const hasSplitChunksCacheGroups = (webpackOptions) => {
+  return webpackOptions?.optimization?.splitChunks?.cacheGroups != null;
+};
+
 /**
  * @param {Error} error
  * @param {string} sourceFile
diff --git a/src/Plugin/Resolver.js b/src/Plugin/Resolver.js
@@ -222,8 +222,8 @@ class Resolver {
     const { issuer, issuerFile } = this;
 
     // @import CSS rule is not supported
-    if (rawRequest.indexOf('??ruleSet') > 0) {
-      resolveException(rawRequest, issuer.resource, this.rootContext);
+    if (rawRequest.includes('??ruleSet')) {
+      resolveException(rawRequest, issuer.resource, this.rootContext, this.pluginOption);
     }
     // bypass the asset contained data-URL
     if (this.assetInline.isDataUrl(rawRequest)) return rawRequest;
@@ -249,6 +249,7 @@ class Resolver {
       }
 
       const assetFile = this.resolveAsset(resource);
+
       if (assetFile != null) return assetFile;
 
       // try to resolve inline data url
@@ -266,13 +267,13 @@ class Resolver {
     if (this.pluginOption.js.test.test(file) && this.assetEntry.isEntryResource(issuer.resource)) {
       // occur after rename/delete of a js file when the entry module was already rebuilt
       Snapshot.addMissingFile(issuer.resource, file);
-      resolveException(file, issuer.resource, this.rootContext);
+      resolveException(file, issuer.resource, this.rootContext, this.pluginOption);
     }
 
     // require a native JavaScript, JSON or css-loader API file
     if (/\.js[a-z0-9]*$/i.test(resource)) return require(resource);
 
-    resolveException(rawRequest, issuer.resource, this.rootContext);
+    resolveException(rawRequest, issuer.resource, this.rootContext, this.pluginOption);
   }
 
   /**
diff --git a/test/cases/_exceptions/msg-exception-split-chunk-css/expected/about.html b/test/cases/_exceptions/msg-exception-split-chunk-css/expected/about.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>About</title>
+  <link href="css/style.2eb0c66b.css" rel="stylesheet">
+  <script src="js/main.7693a3d5.js" defer="defer"></script>
+</head>
+<body>
+  <h1>About</h1>
+</body>
+</html>
diff --git a/test/cases/_exceptions/msg-exception-split-chunk-css/expected/css/style.2eb0c66b.css b/test/cases/_exceptions/msg-exception-split-chunk-css/expected/css/style.2eb0c66b.css
@@ -0,0 +1,7 @@
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+h1 {
+  color: orangered;
+}
diff --git a/test/cases/_exceptions/msg-exception-split-chunk-css/expected/index.html b/test/cases/_exceptions/msg-exception-split-chunk-css/expected/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Home</title>
+  <link href="css/style.2eb0c66b.css" rel="stylesheet">
+  <script src="js/main.7693a3d5.js" defer="defer"></script>
+</head>
+<body>
+  <h1>Home</h1>
+</body>
+</html>
diff --git a/test/cases/_exceptions/msg-exception-split-chunk-css/expected/js/main.7693a3d5.js b/test/cases/_exceptions/msg-exception-split-chunk-css/expected/js/main.7693a3d5.js
@@ -0,0 +1 @@
+console.log(">> main.js");
diff --git a/test/cases/_exceptions/msg-exception-split-chunk-css/src/about.html b/test/cases/_exceptions/msg-exception-split-chunk-css/src/about.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>About</title>
+  <link href="./css/style.scss" rel="stylesheet">
+  <script src="./js/main.js" defer="defer"></script>
+</head>
+<body>
+  <h1>About</h1>
+</body>
+</html>
diff --git a/test/cases/_exceptions/msg-exception-split-chunk-css/src/css/style.scss b/test/cases/_exceptions/msg-exception-split-chunk-css/src/css/style.scss
@@ -0,0 +1,7 @@
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+h1 {
+  color: orangered;
+}
diff --git a/test/cases/_exceptions/msg-exception-split-chunk-css/src/home.html b/test/cases/_exceptions/msg-exception-split-chunk-css/src/home.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Home</title>
+  <link href="./css/style.scss" rel="stylesheet">
+  <script src="./js/main.js" defer="defer"></script>
+</head>
+<body>
+  <h1>Home</h1>
+</body>
+</html>
diff --git a/test/cases/_exceptions/msg-exception-split-chunk-css/src/js/main.js b/test/cases/_exceptions/msg-exception-split-chunk-css/src/js/main.js
@@ -0,0 +1 @@
+console.log('>> main.js');
diff --git a/test/cases/_exceptions/msg-exception-split-chunk-css/webpack.config.js b/test/cases/_exceptions/msg-exception-split-chunk-css/webpack.config.js
@@ -0,0 +1,51 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/home.html',
+        about: './src/about.html',
+      },
+      js: {
+        filename: 'js/[name].[contenthash:8].js',
+        inline: {
+          chunk: [/runtime.+[.]js/],
+        },
+      },
+      css: {
+        filename: 'css/[name].[contenthash:8].css',
+      },
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.s?css$/,
+        use: ['css-loader', 'sass-loader'],
+      },
+    ],
+  },
+
+  optimization: {
+    splitChunks: {
+      minSize: 100, // force split
+      cacheGroups: {
+        default: {
+          //test: /.+\.(js|ts)$/, // <= solution: split only scripts, excluding style files
+          name: 'common',
+          chunks: 'all',
+          minChunks: 2,
+        },
+      },
+    },
+  },
+};
diff --git a/test/cases/option-entry-data-json-for-script/expected/index.html b/test/cases/option-entry-data-json-for-script/expected/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test JSON</title>
+</head>
+<body>
+  <h1>Home</h1>
+  <script>
+    var data = {"devices":["iPhone","iMac","macBook"]};
+    console.log('>> data: ', data);
+  </script>
+</body>
+</html>
diff --git a/test/cases/option-entry-data-json-for-script/src/data.json b/test/cases/option-entry-data-json-for-script/src/data.json
@@ -0,0 +1,3 @@
+{
+  "devices": ["iPhone", "iMac", "macBook"]
+}
diff --git a/test/cases/option-entry-data-json-for-script/src/index.html b/test/cases/option-entry-data-json-for-script/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title><%= title %></title>
+</head>
+<body>
+  <h1>Home</h1>
+  <script>
+    var data = <%= testJSON %>;
+    console.log('>> data: ', data);
+  </script>
+</body>
+</html>
diff --git a/test/cases/option-entry-data-json-for-script/webpack.config.js b/test/cases/option-entry-data-json-for-script/webpack.config.js
@@ -0,0 +1,28 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: {
+          import: 'src/index.html',
+          data: {
+            title: 'Test JSON',
+            testJSON: JSON.stringify(require('./src/data.json')), // pass JSON as a string into `<script>` tag
+          },
+        },
+      },
+      preprocessor: 'eta',
+      preprocessorOptions: {
+        autoEscape: false, // important: disable escaping of JSON string in HTML for using in `<script>` tag
+      },
+    }),
+  ],
+};
diff --git a/test/cases/split-chunk-resolve-css/expected/about.html b/test/cases/split-chunk-resolve-css/expected/about.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>About</title>
+  <link href="css/style.3690c6e6.css" rel="stylesheet">
+  <script src="js/main.7693a3d5.js" defer="defer"></script>
+</head>
+<body>
+  <h1>About</h1>
+</body>
+</html>
diff --git a/test/cases/split-chunk-resolve-css/expected/css/style.3690c6e6.css b/test/cases/split-chunk-resolve-css/expected/css/style.3690c6e6.css
@@ -0,0 +1 @@
+body{font-family:Arial,Helvetica,sans-serif}h1{color:#ff4500}
diff --git a/test/cases/split-chunk-resolve-css/expected/index.html b/test/cases/split-chunk-resolve-css/expected/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Home</title>
+  <link href="css/style.3690c6e6.css" rel="stylesheet">
+  <script src="js/main.7693a3d5.js" defer="defer"></script>
+</head>
+<body>
+  <h1>Home</h1>
+</body>
+</html>
diff --git a/test/cases/split-chunk-resolve-css/expected/js/main.7693a3d5.js b/test/cases/split-chunk-resolve-css/expected/js/main.7693a3d5.js
@@ -0,0 +1 @@
+console.log(">> main.js");
diff --git a/test/cases/split-chunk-resolve-css/src/about.html b/test/cases/split-chunk-resolve-css/src/about.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>About</title>
+  <link href="./css/style.scss" rel="stylesheet">
+  <script src="./js/main.js" defer="defer"></script>
+</head>
+<body>
+  <h1>About</h1>
+</body>
+</html>
diff --git a/test/cases/split-chunk-resolve-css/src/css/style.scss b/test/cases/split-chunk-resolve-css/src/css/style.scss
diff --git a/test/cases/split-chunk-resolve-css/src/home.html b/test/cases/split-chunk-resolve-css/src/home.html
diff --git a/test/cases/split-chunk-resolve-css/src/js/main.js b/test/cases/split-chunk-resolve-css/src/js/main.js
diff --git a/test/cases/split-chunk-resolve-css/webpack.config.js b/test/cases/split-chunk-resolve-css/webpack.config.js
diff --git a/test/integration.test.js b/test/integration.test.js
diff --git a/test/manual/cache-filesystem-multi-config/src/about.html b/test/manual/cache-filesystem-multi-config/src/about.html
diff --git a/test/manual/cache-filesystem-multi-config/src/about.js b/test/manual/cache-filesystem-multi-config/src/about.js
diff --git a/test/manual/cache-filesystem-multi-config/src/index.html b/test/manual/cache-filesystem-multi-config/src/index.html
diff --git a/test/manual/cache-filesystem-multi-config/webpack.config.js b/test/manual/cache-filesystem-multi-config/webpack.config.js
diff --git a/test/messages.test.js b/test/messages.test.js

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.4.1",`
	`3`	`+ "version": "4.4.2",`
`4`	`4`	`"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.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"html",`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,7 @@ @@
 +body {
 +  font-family: Arial, Helvetica, sans-serif;
 +}
++
 +h1 {
 +  color: orangered;
 +}