Stage change

Applelo · Applelo · commit bc5546ac651b · 2021-02-22T18:39:32.000+01:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,6 @@
 {
   "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "workbench.colorCustomizations": {
     "statusBar.background": "#000000",
     "statusBar.foreground": "#e7e7e7",
diff --git a/README.md b/README.md
@@ -32,11 +32,11 @@ module.exports = {
     new HtmlWebpackInjectPreload({
       files: [
         {
-          match: /.*\.woff2/,
+          match: /.*\.woff2$/,
           attributes: {as: 'font', type: 'font/woff2', crossorigin: true },
         },
         {
-          match: /vendors\.[a-z-0-9]*.css/,
+          match: /vendors\.[a-z-0-9]*.css$/,
           attributes: {as: 'style' },
         },
       ]
diff --git a/src/main.ts b/src/main.ts
@@ -81,38 +81,51 @@ class HtmlWebpackInjectPreload implements WebpackPluginInstance {
     compilation: Compilation,
     htmlPluginData: HtmlWebpackPluginData,
   ) {
+    //Get assets name
     const assets = new Set(Object.keys(compilation.assets));
     compilation.chunks.forEach(chunk => {
       chunk.files.forEach((file: string) => assets.add(file));
     });
 
+    //Find first link index to inject before
     const linkIndex = htmlPluginData.headTags.findIndex(
       tag => tag.tagName === 'link',
     );
 
     assets.forEach(asset => {
       for (let index = 0; index < this.options.files.length; index++) {
         const file = this.options.files[index];
-        let href = file.attributes ? file.attributes.href : false;
-        if (!href) {
-          href = asset;
-        }
-
-        href = href[0] === '/' ? href : '/' + href;
 
         if (file.match.test(asset)) {
+          let href =
+            file.attributes && file.attributes.href
+              ? file.attributes.href
+              : false;
+          if (href === false || typeof href === 'undefined') {
+            href = asset;
+          }
+          href = href[0] === '/' ? href : '/' + href;
+
           const preload: HtmlTagObject = {
             tagName: 'link',
-            attributes: Object.assign(file.attributes, {rel: 'preload', href}),
+            attributes: Object.assign(
+              {
+                rel: 'preload',
+                href,
+              },
+              file.attributes,
+            ),
             voidTag: true,
             meta: {
-              plugin: 'html-webpack-inject-preload'
-            }
+              plugin: 'html-webpack-inject-preload',
+            },
           };
 
           if (linkIndex > -1) {
+            //before link
             htmlPluginData.headTags.splice(linkIndex, 0, preload);
           } else {
+            // before everything
             htmlPluginData.headTags.unshift(preload);
           }
         }
diff --git a/test/Roboto-Bold.woff2 b/test/Roboto-Bold.woff2
diff --git a/test/Roboto-Regular.woff b/test/Roboto-Regular.woff
diff --git a/test/expected.html b/test/expected.html
@@ -1 +1 @@
-<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="/main.js"></script><link as="style" href="/test-alt.css" rel="preload"><link as="font" type="font/woff2" crossorigin rel="preload" href="/Roboto-Regular.woff2"><link href="/main.css" rel="stylesheet"></head><body></body></html>
+<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="/main.js"></script><link rel="preload" href="test-alt.css" as="style"><link rel="preload" href="/Roboto-Bold.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/Roboto-Regular.woff" as="font" type="font/woff" crossorigin><link rel="preload" href="/Roboto-Regular.woff2" as="font" type="font/woff2" crossorigin><link href="/main.css" rel="stylesheet"></head><body></body></html>
diff --git a/test/index.test.ts b/test/index.test.ts
@@ -1,22 +1,30 @@
 import HtmlWebpackInjectPreload from '../src/main';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import webpack, { WebpackPluginInstance } from 'webpack';
+import webpack, {WebpackPluginInstance} from 'webpack';
 import path from 'path';
 import fs from 'fs';
 
 const options: HtmlWebpackInjectPreload.Options = {
   files: [
     {
-      match: /.*\.woff2/,
+      match: /.*\.woff2$/,
       attributes: {
         as: 'font',
         type: 'font/woff2',
         crossorigin: true,
       },
     },
     {
-      match: /.*\.css/,
+      match: /.*\.woff$/,
+      attributes: {
+        as: 'font',
+        type: 'font/woff',
+        crossorigin: true,
+      },
+    },
+    {
+      match: /.*\.css$/,
       attributes: {as: 'style', href: 'test-alt.css'},
     },
     {
diff --git a/test/style.css b/test/style.css
@@ -1,9 +1,17 @@
 @font-face {
   font-family: 'Roboto';
   font-weight: 400;
-  src: url('./Roboto-Regular.woff2') format('woff2');
+  src: url('./Roboto-Regular.woff2') format('woff2'),
+  url('./Roboto-Regular.woff') format('woff');
 }
 
+@font-face {
+  font-family: 'Roboto';
+  font-weight: 700;
+  src: url('./Roboto-Bold.woff2') format('woff2');
+}
+
+
 body {
   font-family: Roboto, sans-serif;
   background-color: red;

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"editor.formatOnSave": true,`
	`3`	`+ "editor.defaultFormatter": "esbenp.prettier-vscode",`
`3`	`4`	`"workbench.colorCustomizations": {`
`4`	`5`	`"statusBar.background": "#000000",`
`5`	`6`	`"statusBar.foreground": "#e7e7e7",`
Original file line number	Diff line number	Diff line change
`@@ -32,11 +32,11 @@ module.exports = {`
`32`	`32`	`new HtmlWebpackInjectPreload({`
`33`	`33`	`files: [`
`34`	`34`	`{`
`35`		`- match: /.*\.woff2/,`
	`35`	`+ match: /.*\.woff2$/,`
`36`	`36`	`attributes: {as: 'font', type: 'font/woff2', crossorigin: true },`
`37`	`37`	`},`
`38`	`38`	`{`
`39`		`- match: /vendors\.[a-z-0-9]*.css/,`
	`39`	`+ match: /vendors\.[a-z-0-9]*.css$/,`
`40`	`40`	`attributes: {as: 'style' },`
`41`	`41`	`},`
`42`	`42`	`]`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="/main.js"></script><link as="style" href="/test-alt.css" rel="preload"><link as="font" type="font/woff2" crossorigin rel="preload" href="/Roboto-Regular.woff2"><link href="/main.css" rel="stylesheet"></head><body></body></html>`
	`1`	+<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="/main.js"></script><link rel="preload" href="test-alt.css" as="style"><link rel="preload" href="/Roboto-Bold.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/Roboto-Regular.woff" as="font" type="font/woff" crossorigin><link rel="preload" href="/Roboto-Regular.woff2" as="font" type="font/woff2" crossorigin><link href="/main.css" rel="stylesheet"></head><body></body></html>