From 7effc30df89a6553a20bf7915d97daa067bb4173 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=9D=8F=E4=BA=BA=E6=97=A5=E8=AE=B0?= Date: Tue, 19 Dec 2023 22:18:18 +0800 Subject: [PATCH] feat: Added support `type=systemjs-module` via the `scriptLoading` option (#1822) --- README.md | 2 +- index.js | 6 ++++-- spec/basic.spec.js | 14 ++++++++++++++ typings.d.ts | 2 +- 4 files changed, 20 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 7e6829a0..1a062795 100644 --- a/README.md +++ b/README.md @@ -151,7 +151,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'\|'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. | +|**`scriptLoading`**|`{'blocking'\|'defer'\|'module'\|'systemjs-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 index 2e98833f..dba2d144 100644 --- a/index.js +++ b/index.js @@ -78,9 +78,9 @@ class HtmlWebpackPlugin { options.template = this.getTemplatePath(this.options.template, compiler.context); // Assert correct option spelling - if (options.scriptLoading !== 'defer' && options.scriptLoading !== 'blocking' && options.scriptLoading !== 'module') { + if (options.scriptLoading !== 'defer' && options.scriptLoading !== 'blocking' && options.scriptLoading !== 'module' && options.scriptLoading !== 'systemjs-module') { /** @type {Logger} */ - (this.logger).error('The "scriptLoading" option need to be set to "defer", "blocking" or "module"'); + (this.logger).error('The "scriptLoading" option need to be set to "defer", "blocking" or "module" or "systemjs-module"'); } if (options.inject !== true && options.inject !== false && options.inject !== 'head' && options.inject !== 'body') { @@ -794,6 +794,8 @@ class HtmlWebpackPlugin { attributes.defer = true; } else if (this.options.scriptLoading === 'module') { attributes.type = 'module'; + } else if (this.options.scriptLoading === 'systemjs-module') { + attributes.type = 'systemjs-module'; } attributes.src = src; diff --git a/spec/basic.spec.js b/spec/basic.spec.js index 8c725fd9..43084118 100644 --- a/spec/basic.spec.js +++ b/spec/basic.spec.js @@ -2572,6 +2572,20 @@ describe('HtmlWebpackPlugin', () => { }, [/