release v2.11.0

- feat: add support for `webpack-subresource-integrity` plugin to include the subresource integrity hash
- feat: add the `integrity` option to enable/disable the support for `webpack-subresource-integrity` plugin
- test: add tests for integrity
- dosc: update readme

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change log
 
+## 2.11.0 (2023-09-05)
+
+- feat: add support for the `webpack-subresource-integrity` plugin to include the [subresource integrity hash](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)
+- feat: add the `integrity` option to enable/disable the support for `webpack-subresource-integrity` plugin
+
 ## 2.10.1 (2023-09-02)
 
 - fix: avoid generation of empty css files when source styles are imported in TS file
@@ -16,7 +21,7 @@
   You can try it, but if that doesn't work, just use the default `cache.type` as `memory`.
 - feat: remove the `json5` dependency, take only the parser code from this package, remove unused code from it and optimize it for use with the plugin
 - fix: resolve output asset filenames without the needless index `.1`, like `index.1.js`, when used the same base filename for template and js files.
-  For example, if source files with the same base name `src/index.html` and `src/index.js` were used, then `dist/index.html` and `dist/index.1.js` were created,
+  For example, if the source files with the same base name `src/index.html` and `src/index.js` were used, then `dist/index.html` and `dist/index.1.js` were created,
   because the entry name used for compilation must be unique. This case is fixed.
 - test: add tests for features and fixes
 - test: remove unused code in test suits

README.md

@@ -20,6 +20,7 @@
 
 > _HTML as an entry point works in both Vite and Parcel, and now also in Webpack._
 
+This plugin is a simple all-in-one solution for generating HTML containing JS, CSS, images, fonts and other resources, from their source files.
 The plugin allows to use any [template](#template-engine) file as [entry point](#option-entry).
 In an HTML template can be referenced any source files, similar to how it works in [Vite](https://vitejs.dev/guide/#index-html-and-project-root) or [Parcel](https://parceljs.org/).
 
@@ -216,6 +217,7 @@ See [boilerplate](https://github.com/webdiscus/webpack-html-scss-boilerplate)
    - [preload](#option-preload) (inject preload link tags)
    - [minify](#option-minify) and [minifyOptions](#option-minify-options) (minification of generated HTML)
    - [extractComments](#option-extract-comments)
+   - [integrity](#option-integrity) (enable [subresource integrity hash](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity))
    - [verbose](#option-verbose)
    - [watchFiles](#option-watch-files)
    - [hotUpdate](#option-hot-update)
@@ -266,6 +268,7 @@ See [boilerplate](https://github.com/webdiscus/webpack-html-scss-boilerplate)
    - Tailwind CSS with Webpack [View in browser](https://stackblitz.com/edit/webpack-webpack-js-org-auem8r?file=webpack.config.js) | [source](https://github.com/webdiscus/html-bundler-webpack-plugin/tree/master/examples/tailwindcss/)
    - Handlebars with Webpack [View in browser](https://stackblitz.com/edit/webpack-webpack-js-org-mxbx4t?file=webpack.config.js) | [source](https://github.com/webdiscus/html-bundler-webpack-plugin/tree/master/examples/handlebars/)
    - Extend Handlebars layout with blocks [View in browser](https://stackblitz.com/edit/webpack-webpack-js-org-bjtjvc?file=webpack.config.js) | [source](https://github.com/webdiscus/html-bundler-webpack-plugin/tree/master/examples/handlebars-layout/)
+   - Auto generate integrity hash for `link` and `script` tags [View in browser](https://stackblitz.com/edit/webpack-integrity-hvnfmg?file=webpack.config.js) | [source](https://github.com/webdiscus/html-bundler-webpack-plugin/tree/master/examples/integrity/)
 
 <a id="features" name="features" href="#features"></a>
 
@@ -277,19 +280,20 @@ See [boilerplate](https://github.com/webdiscus/webpack-html-scss-boilerplate)
 - importing style files in JavaScript
 - resolves source asset files in HTML attributes and in the CSS `url()`
 - generated HTML contains output filenames
-- support the module types `asset/resource` `asset/inline` `asset` `asset/source` ([\*](#note-asset-source))
+- supports the module types `asset/resource` `asset/inline` `asset` `asset/source` ([\*](#note-asset-source))
 - `inline CSS` in HTML
 - `inline JavaScript` in HTML
 - `inline image` as `base64 encoded` data-URL for PNG, JPG, etc. in HTML and CSS
 - `inline SVG` as SVG tag in HTML
 - `inline SVG` as `utf-8` data-URL in CSS
 - auto generation of `<link rel="preload">` to preload assets
-- support the `auto` publicPath
+- supports the `auto` publicPath
 - enable/disable [extraction of comments](#option-extract-comments) to `*.LICENSE.txt` file
 - supports template engines such as [Eta](https://eta.js.org), [EJS](https://ejs.co), [Handlebars](https://handlebarsjs.com), [Nunjucks](https://mozilla.github.io/nunjucks/), [LiquidJS](https://github.com/harttle/liquidjs) and others
-- support for both `async` and `sync` preprocessor
+- supports both `async` and `sync` preprocessor
 - auto processing many HTML templates using the [entry path](#option-entry-path), add/delete/rename w/o restarting
 - dynamically loading template variables using the [data](#loader-option-data) option, change data w/o restarting
+- supports [webpack-subresource-integrity](https://www.npmjs.com/package/webpack-subresource-integrity) and include the [integrity hash](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) to `link` and `script` tags
 - [minification](#option-minify) of generated HTML
 
 <a id="note-asset-source" name="note-asset-source" href="#note-asset-source"></a>
@@ -385,7 +389,7 @@ module.exports = {
       entry: {
         // define templates here
         index: {
-          // => dist/index.html (key is output filename w/o '.html')
+          // => dist/index.html
           import: 'src/views/home.html', // template file
           data: { title: 'Homepage', name: 'Heisenberg' }, // pass variables into template
         },
@@ -1456,7 +1460,7 @@ The generated HTML contains the preload tags exactly in the order of `preload` o
 
 ### `minify`
 
-Type: `Object|string|boolean` Default: `false`
+Type: `'auto'|boolean|Object` Default: `false`
 
 For minification generated HTML is used the [html-minifier-terser](https://github.com/terser/html-minifier-terser) with the following `default options`:
 
@@ -1508,6 +1512,91 @@ But if you want to extract files like `*.LICENSE.txt`, set this option to `true`
 
 #### [↑ back to contents](#contents)
 
+<a id="option-integrity" name="option-integrity" href="#integrity"></a>
+
+### `integrity`
+
+Type: `'auto'|boolean` Default: `'auto'`
+
+Possible values:
+
+- `auto` - enable in `production` mode, disable in `development` mode
+- `true` - enable
+- `false` - disable
+
+The `html-bundler-webpack-plugin` automatically supports the [webpack-subresource-integrity](https://www.npmjs.com/package/webpack-subresource-integrity) plugin
+if it is installed.
+To include the [subresource integrity hash](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)
+in `link` and `script` tags, you need to install the `webpack-subresource-integrity` plugin:
+
+```
+npm install -D webpack-subresource-integrity
+```
+
+Add this plugin in the Webpack config:
+
+```js
+const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity');
+const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
+
+module.exports = {
+  output: {
+    // the following setting is required for SRI to work:
+    crossOriginLoading: 'anonymous',
+  },
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: 'src/views/index.html', // template where are included link and script tags
+      },
+      integrity: 'auto', // can be omitted, because the default value is 'auto'
+    }),
+    new SubresourceIntegrityPlugin(),
+  ],
+};
+```
+
+The source HTML template _src/views/index.html_:
+
+```html
+<html>
+  <head>
+    <!-- include source style -->
+    <link href="./style.scss" rel="stylesheet" />
+    <!-- include source script -->
+    <script src="./main.js" defer="defer"></script>
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+  </body>
+</html>
+```
+
+The generated HTML contains the integrity hashs:
+
+```html
+<html>
+  <head>
+    <link
+      href="assets/css/style.css"
+      rel="stylesheet"
+      integrity="sha384-gaDmgJjLpipN1Jmuc98geFnDjVqWn1fixlG0Ab90qFyUIJ4ARXlKBsMGumxTSu7E"
+      crossorigin="anonymous" />
+
+    <script
+      src="assets/js/main.js"
+      defer="defer"
+      integrity="sha384-E4IoJ3Xutt/6tUVDjvtPwDTTlCfU5oG199UoqWShFCNx6mb4tdpcPLu7sLzNc8Pe"
+      crossorigin="anonymous"></script>
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+  </body>
+</html>
+```
+
+#### [↑ back to contents](#contents)
+
 <a id="option-watch-files" name="option-watch-files" href="#option-watch-files"></a>
 
 ### `watchFiles`
@@ -1601,7 +1690,7 @@ If you already have a js file in html, this setting should be `false` as Webpack
 
 ### `verbose`
 
-Type: `string|boolean` Default: `false`
+Type: `'auto'|boolean` Default: `false`
 
 The verbose option allows displaying in the console the processing information about extracted resources.
 All resources are grouped by their issuers.
@@ -3221,7 +3310,7 @@ The template _index.html_ where is loaded the source style:
 <html>
   <head>
     <title>Demo</title>
-    <!-- load source style -->
+    <!-- include source style -->
     <link href="./styles.scss" rel="stylesheet" />
   </head>
   <body>
@@ -3749,10 +3838,10 @@ _src/views/pages/home/index.html_
 
 ```html
 {% extends "src/views/layouts/default.html" %} {% block styles %}
-<!-- load source style -->
+<!-- include source style -->
 <link href="./home.scss" rel="stylesheet" />
 {% endblock %} {% block scripts %}
-<!-- load source script -->
+<!-- include source script -->
 <script src="./home.js" defer="defer"></script>
 {% endblock %} {% block content %}
 <h1>{{ filmTitle }}</h1>
@@ -4128,9 +4217,9 @@ If you want save module styles separate from your styles, then load them in a te
 <html>
   <head>
     <title>Home</title>
-    <!-- load module styles separately -->
+    <!-- include module styles -->
     <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-    <!-- load your styles separately -->
+    <!-- include your styles -->
     <link href="./styles.scss" rel="stylesheet" />
   </head>
   <body>
@@ -4163,7 +4252,7 @@ There is a template used the `main.js` _./src/views/index.html_:
 ```html
 <html>
   <head>
-    <!-- load source script -->
+    <!-- include source script -->
     <script src="./main.js" defer="defer"></script>
   </head>
   <body>
@@ -4247,8 +4336,6 @@ dist/js/app-5fa74877.1aceb2db.js
 
 ## Sponsors
 
-Support this project by becoming a sponsor!
-
 Thank you to our sponsors!
 
 | Sponsors                                                                                                                                                               |                                                                                                         |

examples/handlebars-layout/package.json

@@ -15,7 +15,7 @@
   "devDependencies": {
     "css-loader": "^6.8.1",
     "handlebars": "^4.7.8",
-    "html-bundler-webpack-plugin": "^2.10.0",
+    "html-bundler-webpack-plugin": "^2.10.1",
     "sass": "^1.64.2",
     "sass-loader": "^13.3.2",
     "webpack": "^5.88.2",

examples/handlebars-layout/src/views/helpers/block.js

@@ -1,7 +1,5 @@
 'use strict';
 
-const Handlebars = require('handlebars');
-
 /** @typedef {import('handlebars').HelperOptions} HelperOptions */
 
 /**
@@ -17,13 +15,7 @@ const Handlebars = require('handlebars');
  * @return {string}
  */
 module.exports = function (name, options) {
-  const context = this;
-  let partial = context._blocks[name] || options.fn;
-
-  if (typeof partial === 'string') {
-    partial = Handlebars.compile(partial);
-    context._blocks[name] = partial;
-  }
+  const partial = this._blocks[name] || options.fn;
 
-  return partial(context, { data: options.hash });
+  return partial(this, { data: options.hash });
 };

examples/handlebars-layout/src/views/pages/about/index.hbs

@@ -1,16 +1,16 @@
 {{assign title='About' header='About'}}
 
-<!-- define the block with page-specific scripts -->
+{{! define the block with page-specific scripts }}
 {{#partial 'scripts'}}
   <script src="./about.js" defer="defer"></script>
 {{/partial}}
 
-<!-- define the block with page-specific styles -->
+{{! define the block with page-specific styles }}
 {{#partial 'styles'}}
   <link href="./about.scss" rel="stylesheet">
 {{/partial}}
 
-<!-- define block content: include the `home/content.hbs` partial -->
+{{! define block content: include the `home/content.hbs` partial }}
 {{#partial 'content'}}
   {{> about/content}}
 {{/partial}}
@@ -19,5 +19,5 @@
   <p class="custom">About custom block </p>
 {{/partial}}
 
-<!-- extends the layout template with blocks defined above -->
+{{! extends the layout template with blocks defined above }}
 {{> layout}}

examples/handlebars-layout/src/views/pages/home/index.hbs

@@ -1,19 +1,19 @@
 {{assign title='Homepage' header='Home'}}
 
-<!-- define the block with page-specific scripts -->
+{{! define the block with page-specific scripts }}
 {{#partial 'scripts'}}
   <script src="./home.js" defer="defer"></script>
 {{/partial}}
 
-<!-- define the block with page-specific styles -->
+{{! define the block with page-specific styles }}
 {{#partial 'styles'}}
   <link href="./home.scss" rel="stylesheet">
 {{/partial}}
 
-<!-- define the block content: include the `home/content.hbs` partial -->
+{{! define the block content: include the `home/content.hbs` partial }}
 {{#partial 'content'}}
   {{> home/content}}
 {{/partial}}
 
-<!-- extends the layout template with blocks defined above -->
+{{! extends the layout template with blocks defined above }}
 {{> layout}}

examples/handlebars-layout/src/views/partials/layout.hbs

@@ -2,14 +2,14 @@
 <html>
 <head>
   <title>{{ title }}</title>
-  <!-- reference to source image -->
+  {{! reference to source image }}
   <link href="@images/favicon.png" rel="shortcut icon" type="image/png">
 
-  <!-- common used source styles and scripts -->
+  {{! common used source styles and scripts }}
   <link href="@styles/styles.scss" rel="stylesheet">
   <script src="@scripts/main.js" defer="defer"></script>
 
-  <!-- blocks for page-specific styles and scripts -->
+  {{! blocks for page-specific styles and scripts }}
   {{#block 'styles'}}{{/block}}
   {{#block 'scripts'}}{{/block}}
 </head>
@@ -22,11 +22,11 @@
   </nav>
 
   <div class="container">
-    <!-- output content block defined in a parent template -->
+    {{! output content block defined in a parent template }}
     {{#block 'content'}}{{/block}}
   </div>
 
-  <!-- if the block is not defined in a parent template, then output default content -->
+  {{! if the block is not defined in a parent template, then output default content }}
   {{#block 'custom_block'}}<p class="custom">default block content</p>{{/block}}
 
   {{> footer }}

examples/handlebars-layout/webpack.config.js

@@ -34,7 +34,7 @@ module.exports = {
       preprocessor: 'handlebars',
       // define handlebars options
       preprocessorOptions: {
-        //helpers: [path.join(__dirname, 'src/views/helpers')],
+        //helpers: [path.join(__dirname, 'src/views/helpers')], // enable to use own helpers
         partials: ['src/views/pages/', 'src/views/partials/'],
       },
       js: {

examples/handlebars/src/views/pages/home.hbs

@@ -2,9 +2,9 @@
 <html>
 <head>
   <title>{{ title }}</title>
-  <!-- reference to source image -->
+  {{! reference to source image }}
   <link href="../../images/favicon.png" rel="shortcut icon" type="image/png">
-  <!-- references to source style and script -->
+  {{! references to source style and script }}
   <link href="../../scss/styles.scss" rel="stylesheet">
   <script src="../../js/main.js" defer="defer"></script>
 </head>
@@ -14,7 +14,7 @@
   <div class="container">
     <h1>Handlebars</h1>
 
-    <!-- using of the arraySize helper -->
+    {{! using of the arraySize helper }}
     <div>{{ arraySize persons }} persons:</div>
 
     <ul class="person">