feat: Support type=module via scriptLoading option

Add third option, `'module'`, to the `scriptLoading` option. This partially fixes issue #1663, which is also where this solution to the problem was proposed. Although this patch doesn't give a way to freely set `type` attribute to any value, setting `scriptLoading: "module" now makes the scripts have attribute `type="module"`, which was the original motivation behind the issue.
jantimon · Oct 25, 2021 · 1e42625 · 1e42625
1 parent 7d3645b
commit 1e42625
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -149,7 +149,7 @@ Allowed values are as follows:
 |**`templateParameters`**|`{Boolean\|Object\|Function}`| `false`| Allows to overwrite the parameters used in the template - see [example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/template-parameters) |
 |**`inject`**|`{Boolean\|String}`|`true`|`true \|\| 'head' \|\| 'body' \|\| false` Inject all assets into the given `template` or `templateContent`. When passing `'body'` all javascript resources will be placed at the bottom of the body element. `'head'` will place the scripts in the head element. Passing `true` will add it to the head/body depending on the `scriptLoading` option. Passing `false` will disable automatic injections. - see the [inject:false example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/custom-insertion-position)|
 |**`publicPath`**|`{String\|'auto'}`|`'auto'`|The publicPath used for script and link tags|
-|**`scriptLoading`**|`{'blocking'\|'defer'}`|`'defer'`| Modern browsers support non blocking javascript loading (`'defer'`) to improve the page startup performance. |
+|**`scriptLoading`**|`{'blocking'\|'defer'\|'module'}`|`'defer'`| Modern browsers support non blocking javascript loading (`'defer'`) to improve the page startup performance. Setting to `'module'` adds attribute [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html). This also implies "defer", since modules are automatically deferred. |
 |**`favicon`**|`{String}`|``|Adds the given favicon path to the output HTML|
 |**`meta`**|`{Object}`|`{}`|Allows to inject `meta`-tags. E.g. `meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`|
 |**`base`**|`{Object\|String\|false}`|`false`|Inject a [`base`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag. E.g. `base: "https://example.com/path/page.html`|

diff --git a/index.js b/index.js
@@ -70,7 +70,7 @@ class HtmlWebpackPlugin {
       this.options = options;
 
       // Assert correct option spelling
-      assert(options.scriptLoading === 'defer' || options.scriptLoading === 'blocking', 'scriptLoading needs to be set to "defer" or "blocking');
+      assert(options.scriptLoading === 'defer' || options.scriptLoading === 'blocking' || options.scriptLoading === 'module', 'scriptLoading needs to be set to "defer", "blocking" or "module"');
       assert(options.inject === true || options.inject === false || options.inject === 'head' || options.inject === 'body', 'inject needs to be set to true, false, "head" or "body');
 
       // Default metaOptions if no template is provided
@@ -741,7 +741,8 @@ function hookIntoCompiler (compiler, options, plugin) {
       voidTag: false,
       meta: { plugin: 'html-webpack-plugin' },
       attributes: {
-        defer: options.scriptLoading !== 'blocking',
+        defer: options.scriptLoading === 'defer',
+        type: options.scriptLoading === 'module' ? 'module' : undefined,
         src: scriptAsset
       }
     }));

diff --git a/spec/basic.spec.js b/spec/basic.spec.js
@@ -2526,6 +2526,20 @@ describe('HtmlWebpackPlugin', () => {
     }, [/<script defer="defer" .+<body>/], null, done);
   });
 
+  it('should allow to inject scripts with a type="module" attribute', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'index_bundle.js'
+      },
+      plugins: [new HtmlWebpackPlugin({
+        scriptLoading: 'module'
+      })]
+    }, [/<script type="module" src="index_bundle.js"><\/script>.+<body>/], null, done);
+  });
+
   it('should allow to inject scripts with a defer="defer" attribute to the body', done => {
     testHtmlPlugin({
       mode: 'production',

diff --git a/typings.d.ts b/typings.d.ts
@@ -96,7 +96,7 @@ declare namespace HtmlWebpackPlugin {
      *
      * @default 'defer'
      */
-    scriptLoading?: "blocking" | "defer";
+    scriptLoading?: "blocking" | "defer" | "module";
     /**
      * Inject meta tags
      */