feat: support for webpack 5

icelam · icelam · commit a0156798e6a8 · 2021-03-06T19:58:20.000+08:00
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
@@ -1,6 +1,10 @@
 <!-- Please fill in below sections, include details as much as possible -->
 <!-- Leave "N/A" to any non-applicable sections instead of leaving them blank -->
 
+## Environment and package version
+<!---- Include the webpack version and package version ---->
+<!---- e.g. Webpack 5.0.0, HTML webpack plugin 5.0.0 , HTML inline script plugin 2.0.0 ---->
+
 ## Reproduction link / code sample
 <!---- Include a minimal code sample to demonstrate the issue if possible ---->
 
diff --git a/README.md b/README.md
@@ -1,25 +1,42 @@
-# HTML Inline Script Webpack Plugin for webpack 4 (html-inline-script-webpack-plugin)
+# HTML Inline Script Webpack Plugin for webpack (html-inline-script-webpack-plugin)
 
 [![Latest version](https://img.shields.io/github/v/release/icelam/html-inline-script-webpack-plugin.svg?sort=semver&label=latest)](https://github.com/icelam/html-inline-script-webpack-plugin/releases)
 [![Download count](https://img.shields.io/npm/dm/html-inline-script-webpack-plugin)](https://www.npmjs.com/package/html-inline-script-webpack-plugin)
 [![Install size](https://packagephobia.com/badge?p=html-inline-script-webpack-plugin)](https://packagephobia.com/result?p=html-inline-script-webpack-plugin)
 ![ci](https://github.com/icelam/html-inline-script-webpack-plugin/workflows/ci/badge.svg)
 [![Package quality](https://npm.packagequality.com/shield/html-inline-script-webpack-plugin.svg)](https://packagequality.com/#?package=html-inline-script-webpack-plugin)
+[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/icelam/html-inline-script-webpack-plugin.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/icelam/html-inline-script-webpack-plugin/context:javascript)
+
+[![NPM](https://nodei.co/npm/html-inline-script-webpack-plugin.png?compact=true)](https://npmjs.org/package/html-inline-script-webpack-plugin)
 
 A webpack plugin for converting external script files `<script src="app.js"></script>` to inline script block `<script>...</script>`. Requires [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) to work.
 
 Inspired by [react-dev-utils](https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/InlineChunkHtmlPlugin.js) created by [Facebook](https://github.com/facebook/).
 
 ## Install
-### NPM
+
+### Webpack5
+
+#### NPM
 ```bash
 npm i html-inline-script-webpack-plugin -D
 ```
-### Yarn
+#### Yarn
 ```bash
 yarn add html-inline-script-webpack-plugin -D
 ```
 
+### Webpack4
+
+#### NPM
+```bash
+npm i html-inline-script-webpack-plugin@^1 -D
+```
+#### Yarn
+```bash
+yarn add html-inline-script-webpack-plugin@^1 -D
+```
+
 ## Usage
 By default, the plugin will convert all the external script files to inline script block.
 ```js
diff --git a/__tests__/cases/multiple-instance/expected/index.html b/__tests__/cases/multiple-instance/expected/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="language" content="English"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="minimum-scale=1,initial-scale=1,width=device-width,shrink-to-fit=no"/><title>webpack test</title></head><body><p>This is minimal code to demonstrate webpack usage</p><script>!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){console.log("Hello world")}]);</script><script>!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([,function(e,t){console.log("Page 2")}]);</script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="language" content="English"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="minimum-scale=1,initial-scale=1,width=device-width,shrink-to-fit=no"/><title>webpack test</title><script defer="defer">console.log("Hello world");</script><script defer="defer">console.log("Page 2");</script></head><body><p>This is minimal code to demonstrate webpack usage</p></body></html>
diff --git a/__tests__/cases/multiple-instance/expected/page2.html b/__tests__/cases/multiple-instance/expected/page2.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="language" content="English"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="minimum-scale=1,initial-scale=1,width=device-width,shrink-to-fit=no"/><title>webpack test</title></head><body><p>This is minimal code to demonstrate webpack usage</p><script>!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){console.log("Hello world")}]);</script><script>!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([,function(e,t){console.log("Page 2")}]);</script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="language" content="English"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="minimum-scale=1,initial-scale=1,width=device-width,shrink-to-fit=no"/><title>webpack test</title><script defer="defer">console.log("Hello world");</script><script defer="defer">console.log("Page 2");</script></head><body><p>This is minimal code to demonstrate webpack usage</p></body></html>
diff --git a/__tests__/cases/simple/expected/index.html b/__tests__/cases/simple/expected/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="language" content="English"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="minimum-scale=1,initial-scale=1,width=device-width,shrink-to-fit=no"/><title>webpack test</title></head><body><p>This is minimal code to demonstrate webpack usage</p><script>!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){console.log("Hello world")}]);</script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="language" content="English"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="minimum-scale=1,initial-scale=1,width=device-width,shrink-to-fit=no"/><title>webpack test</title><script defer="defer">console.log("Hello world");</script></head><body><p>This is minimal code to demonstrate webpack usage</p></body></html>
diff --git a/package.json b/package.json
@@ -22,11 +22,13 @@
   "keywords": [
     "webpack",
     "webpack4",
+    "webpack5",
     "webpack-plugin",
     "html-webpack-plugin",
     "inline",
     "internal",
     "embedded",
+    "source",
     "inline-source",
     "script",
     "inline-script"
@@ -36,7 +38,6 @@
     "@commitlint/config-conventional": "^12.0.0",
     "@types/html-webpack-plugin": "^3.2.3",
     "@types/jest": "^26.0.20",
-    "@types/webpack": "^4.41.26",
     "@types/webpack-sources": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^4.15.2",
@@ -54,7 +55,7 @@
     "typescript": "^4.1.3"
   },
   "peerDependencies": {
-    "html-webpack-plugin": "^4.0.0",
-    "webpack": "^4.0.0"
+    "html-webpack-plugin": "^5.0.0",
+    "webpack": "^5.0.0"
   }
 }
diff --git a/src/HtmlInlineScriptPlugin.ts b/src/HtmlInlineScriptPlugin.ts
@@ -1,10 +1,10 @@
-import type { Compiler, Plugin } from 'webpack';
-import type { RawSource } from 'webpack-sources';
+import { Compilation } from 'webpack';
+import type { Compiler, WebpackPluginInstance } from 'webpack';
 import htmlWebpackPlugin from 'html-webpack-plugin';
 import type { HtmlTagObject } from 'html-webpack-plugin';
 import { PLUGIN_PREFIX } from './constants';
 
-class HtmlInlineScriptPlugin implements Plugin {
+class HtmlInlineScriptPlugin implements WebpackPluginInstance {
   tests: RegExp[];
 
   constructor(tests?: RegExp[]) {
@@ -19,7 +19,7 @@ class HtmlInlineScriptPlugin implements Plugin {
 
   processScriptTag(
     publicPath: string,
-    assets: { [key: string]: RawSource },
+    assets: Compilation['assets'],
     tag: HtmlTagObject
   ): HtmlTagObject {
     if (tag.tagName !== 'script' || !tag.attributes?.src) {
@@ -43,14 +43,15 @@ class HtmlInlineScriptPlugin implements Plugin {
 
     return {
       tagName: 'script',
-      innerHTML: asset.source(),
+      innerHTML: asset.source() as string,
       voidTag: false,
-      attributes: attributesWithoutSrc
+      attributes: attributesWithoutSrc,
+      meta: { plugin: 'html-inline-script-webpack-plugin' }
     };
   }
 
   apply(compiler: Compiler): void {
-    let publicPath = compiler.options?.output?.publicPath || '';
+    let publicPath = compiler.options?.output?.publicPath as string || '';
 
     if (publicPath && !publicPath.endsWith('/')) {
       publicPath += '/';
@@ -65,13 +66,16 @@ class HtmlInlineScriptPlugin implements Plugin {
         );
         return data;
       });
-    });
 
-    compiler.hooks.emit.tap(`${PLUGIN_PREFIX}_emit`, (compilation) => {
-      Object.keys(compilation.assets).forEach((assetName) => {
-        if (this.isFileNeedsToBeInlined(assetName)) {
-          delete compilation.assets[assetName];
-        }
+      compilation.hooks.processAssets.tap({
+        name: `${PLUGIN_PREFIX}_PROCESS_ASSETS_STAGE_SUMMARIZE`,
+        stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE
+      }, (assets) => {
+        Object.keys(assets).forEach((assetName) => {
+          if (this.isFileNeedsToBeInlined(assetName)) {
+            delete assets[assetName];
+          }
+        });
       });
     });
   }
diff --git a/src/index.ts b/src/index.ts
@@ -1,14 +1,17 @@
+import { version as webpackVersion } from 'webpack';
 import htmlWebpackPlugin from 'html-webpack-plugin';
 import HtmlInlineScriptPlugin from './HtmlInlineScriptPlugin';
 
-const isHtmlWebpackPluginV4 = 'getHooks' in htmlWebpackPlugin;
+const isHtmlWebpackPluginV3 = !('getHooks' in htmlWebpackPlugin);
+const isHtmlWebpackPluginV4 = webpackVersion.startsWith('4.');
+const isUnsupportedVersion = isHtmlWebpackPluginV3 || isHtmlWebpackPluginV4;
 
-if (!isHtmlWebpackPluginV4) {
+if (isUnsupportedVersion) {
   // eslint-disable-next-line no-console
   console.error(
     '\x1b[35m%s \x1b[31m%s\x1b[0m',
     '[html-inline-script-webpack-plugin]',
-    'Please upgrade your webpack to version 4 to use this plugin.'
+    'Version 2.x only supports webpack 5. If you are using webpack 4, please downgrade this plugin to version 1.x instead.'
   );
 
   throw new Error('VERSION_INCOMPATIBLE');
diff --git a/yarn.lock b/yarn.lock
@@ -850,7 +850,7 @@
     "@types/source-list-map" "*"
     source-map "^0.7.3"
 
-"@types/webpack@*", "@types/webpack@^4.41.26":
+"@types/webpack@*":
   version "4.41.26"
   resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.26.tgz#27a30d7d531e16489f9c7607c747be6bc1a459ef"
   integrity sha512-7ZyTfxjCRwexh+EJFwRUM+CDB2XvgHl4vfuqf1ZKrgGvcS5BrNvPQqJh3tsZ0P6h6Aa1qClVHaJZszLPzpqHeA==

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="language" content="English"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="minimum-scale=1,initial-scale=1,width=device-width,shrink-to-fit=no"/><title>webpack test</title></head><body><p>This is minimal code to demonstrate webpack usage</p><script>!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){console.log("Hello world")}]);</script><script>!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([,function(e,t){console.log("Page 2")}]);</script></body></html>
	`1`	+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="language" content="English"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="minimum-scale=1,initial-scale=1,width=device-width,shrink-to-fit=no"/><title>webpack test</title><script defer="defer">console.log("Hello world");</script><script defer="defer">console.log("Page 2");</script></head><body><p>This is minimal code to demonstrate webpack usage</p></body></html>
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="language" content="English"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="minimum-scale=1,initial-scale=1,width=device-width,shrink-to-fit=no"/><title>webpack test</title></head><body><p>This is minimal code to demonstrate webpack usage</p><script>!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){console.log("Hello world")}]);</script></body></html>
	`1`	`+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="language" content="English"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="minimum-scale=1,initial-scale=1,width=device-width,shrink-to-fit=no"/><title>webpack test</title><script defer="defer">console.log("Hello world");</script></head><body><p>This is minimal code to demonstrate webpack usage</p></body></html>`