Merge pull request #8 from principalstudio/Applelo/issue6

Fix #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.5",
-    "@types/webpack": "^4.41.22",
-    "@typescript-eslint/parser": "^4.4.0",
-    "css-loader": "^4.3.0",
-    "eslint": "^7.10.0",
-    "file-loader": "^6.1.0",
-    "html-webpack-plugin": "^4.5.0",
-    "jest": "^26.5.2",
-    "mini-css-extract-plugin": "^0.12.0",
-    "prettier": "^2.1.2",
-    "ts-jest": "^26.4.1",
-    "typescript": "^4.0.3",
-    "url-loader": "^4.1.0",
-    "webpack": "^4.44.2"
+    "@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.17.0"
   }
-}
+}

package.json

@@ -2,7 +2,7 @@ import type {
   default as HtmlWebpackPluginInstance,
   HtmlTagObject,
 } from 'html-webpack-plugin';
-import type {compilation, Compiler, Plugin} from 'webpack';
+import type {Compilation, Compiler, WebpackPluginInstance} from 'webpack';
 
 declare namespace HtmlWebpackInjectPreload {
   interface Options {
@@ -42,7 +42,7 @@ interface HtmlWebpackPluginData {
  *
  * @class InjectPreloadFiles
  */
-class HtmlWebpackInjectPreload implements Plugin {
+class HtmlWebpackInjectPreload implements WebpackPluginInstance {
   private options: HtmlWebpackInjectPreload.Options = {
     files: [],
   };
@@ -78,7 +78,7 @@ class HtmlWebpackInjectPreload implements Plugin {
   };
 
   private addLinks(
-    compilation: compilation.Compilation,
+    compilation: Compilation,
     htmlPluginData: HtmlWebpackPluginData,
   ) {
     const assets = new Set(Object.keys(compilation.assets));
@@ -101,10 +101,13 @@ class HtmlWebpackInjectPreload implements Plugin {
         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

@@ -1,7 +1,7 @@
 import HtmlWebpackInjectPreload from '../src/main';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import webpack from 'webpack';
+import webpack, { WebpackPluginInstance } from 'webpack';
 import path from 'path';
 import fs from 'fs';
 
@@ -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,16 +54,22 @@ describe('HTMLWebpackInjectPreload', () => {
       },
       output: {
         path: path.join(__dirname, 'dist'),
+        publicPath: '/',
       },
       plugins: [
-        new MiniCssExtractPlugin(),
+        new MiniCssExtractPlugin() as WebpackPluginInstance,
         new HtmlWebpackPlugin(),
         new HtmlWebpackInjectPreload(options),
       ],
     });
     compiler.run((err, stats) => {
       if (err) expect(err).toBeNull();
-      expect(stats.compilation.errors.length).toBe(0);
+
+      const statsErrors = stats ? stats.compilation.errors : [];
+      if (statsErrors.length > 0) {
+        console.error(statsErrors);
+      }
+      expect(statsErrors.length).toBe(0);
 
       const result = fs.readFileSync(
         path.join(__dirname, 'dist/index.html'),

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"
     ],