Update for Webpack 5

Fixes #6

Author: Applelo

README.md

@@ -5,7 +5,7 @@ This plugin allows to add preload links anywhere you want.
 
 # Installation
 
-You need to have HTMLWebpackPlugin v4 to make this plugin work.
+You need to have HTMLWebpackPlugin v5 to make this plugin work.
 
 ```
 npm i -D @principalstudio/html-webpack-inject-preload

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@principalstudio/html-webpack-inject-preload",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A html webpack plugin for injecting <link rel='preload'>",
   "main": "lib/main.js",
   "types": "lib/main.d.ts",
@@ -31,21 +31,19 @@
   },
   "homepage": "https://github.com/principalstudio/html-webpack-inject-preload#readme",
   "devDependencies": {
-    "@types/jest": "^26.0.14",
-    "@types/mini-css-extract-plugin": "^0.9.1",
-    "@types/node": "^14.11.8",
-    "@types/webpack": "^4.41.22",
-    "@typescript-eslint/parser": "^4.4.1",
-    "css-loader": "^4.3.0",
-    "eslint": "^7.11.0",
-    "file-loader": "^6.1.1",
-    "html-webpack-plugin": "^4.5.0",
-    "jest": "^26.5.3",
-    "mini-css-extract-plugin": "^1.0.0",
-    "prettier": "^2.1.2",
-    "ts-jest": "^26.4.1",
-    "typescript": "^4.0.3",
+    "@types/jest": "^26.0.20",
+    "@types/node": "^14.14.22",
+    "@typescript-eslint/parser": "^4.14.0",
+    "css-loader": "^5.0.1",
+    "eslint": "^7.18.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "5.0.0-beta.6",
+    "jest": "^26.6.3",
+    "mini-css-extract-plugin": "^1.3.4",
+    "prettier": "^2.2.1",
+    "ts-jest": "^26.4.4",
+    "typescript": "^4.1.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.1.0"
+    "webpack": "^5.17.0"
   }
 }

package.json

@@ -85,7 +85,6 @@ class HtmlWebpackInjectPreload implements WebpackPluginInstance {
     compilation.chunks.forEach(chunk => {
       chunk.files.forEach((file: string) => assets.add(file));
     });
-    console.log(assets);
 
     const linkIndex = htmlPluginData.headTags.findIndex(
       tag => tag.tagName === 'link',
@@ -102,10 +101,13 @@ class HtmlWebpackInjectPreload implements WebpackPluginInstance {
         href = href[0] === '/' ? href : '/' + href;
 
         if (file.match.test(asset)) {
-          const preload = {
+          const preload: HtmlTagObject = {
             tagName: 'link',
             attributes: Object.assign(file.attributes, {rel: 'preload', href}),
             voidTag: true,
+            meta: {
+              plugin: 'html-webpack-inject-preload'
+            }
           };
 
           if (linkIndex > -1) {

src/main.ts

@@ -29,6 +29,8 @@ const options: HtmlWebpackInjectPreload.Options = {
 describe('HTMLWebpackInjectPreload', () => {
   it('webpack plugin', done => {
     const compiler = webpack({
+      mode: 'production',
+      context: path.resolve(__dirname),
       entry: path.join(__dirname, 'entry.js'),
       module: {
         rules: [
@@ -52,7 +54,7 @@ describe('HTMLWebpackInjectPreload', () => {
       },
       output: {
         path: path.join(__dirname, 'dist'),
-        publicPath: path.resolve(__dirname),
+        publicPath: '/',
       },
       plugins: [
         new MiniCssExtractPlugin() as WebpackPluginInstance,

test/index.test.ts

@@ -7,4 +7,9 @@
 body {
   font-family: Roboto, sans-serif;
   background-color: red;
+  color: white;
+}
+
+body::before {
+  content: 'Hello world'
 }

test/style.css

@@ -15,7 +15,6 @@
     /* Raise error on expressions and declarations with an implied 'any' type. */
     "esModuleInterop": true,
     /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    "typeRoots": ["node_modules/@types", "typings"],
     "lib": [
       "es2019"
     ],