npmpackage.info

Gathering detailed insights and metrics for @principalstudio/html-webpack-inject-preload

@principalstudio/html-webpack-inject-preload - 1.2.7 | npmpackage.info

@principalstudio/html-webpack-inject-preload

A html webpack plugin for injecting <link rel='preload'>

1.2.7

MIT

TypeScript

10.84 kB

Installations

npm install @principalstudio/html-webpack-inject-preload

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>=10.23

Node Version

12.20.2

NPM Version

7.6.0 Pull Requests

Open

1

Total

10

Closed

0

Merged

9

Issues

Open

1

Total

15

Closed

14

Releases

1.2.7

Updated on Mar 08, 2021

1.2.6

Updated on Feb 26, 2021

1.2.5

Updated on Feb 25, 2021

1.2.4

Updated on Feb 22, 2021

1.2.2

Updated on Feb 09, 2021

1.2.1

Updated on Feb 01, 2021

View All 11 releases

Languages

TypeScript

HTML

CSS

JavaScript

TypeScript (81.42%)

HTML (11.57%)

CSS (4%)

JavaScript (3.02%)

Developer

principalstudio

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

32 Stars

38 Commits

4 Forks

3 Watchers

1 Branches

2 Contributors

Updated on Mar 20, 2025

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

1.2.7

Package Id

@principalstudio/html-webpack-inject-preload@1.2.7

Unpacked Size

10.84 kB

Size

3.67 kB

File Count

NPM Version

7.6.0

Node Version

12.20.2

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

html-webpack-plugin webpack

Dev Dependencies

@types/jest @types/node @typescript-eslint/parser css-loader eslint file-loader html-webpack-plugin jest mini-css-extract-plugin prettier ts-jest typescript url-loader webpack

HTML Webpack Inject Preload

A HTML Webpack Plugin for injecting <link rel='preload'>

This plugin allows to add preload links anywhere you want.

Installation

You need to have HTMLWebpackPlugin v4 or v5 to make this plugin work.

npm i -D @principalstudio/html-webpack-inject-preload

webpack.config.js

1const HtmlWebpackPlugin = require('html-webpack-plugin');
2const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload');
3
4module.exports = {
5  entry: 'index.js',
6  output: {
7    path: __dirname + '/dist',
8    filename: 'index_bundle.js'
9  },
10  plugins: [
11    new HtmlWebpackPlugin(),
12    new HtmlWebpackInjectPreload({
13      files: [
14        {
15          match: /.*\.woff2$/,
16          attributes: {as: 'font', type: 'font/woff2', crossorigin: true },
17        },
18        {
19          match: /vendors\.[a-z-0-9]*.css$/,
20          attributes: {as: 'style' },
21        },
22      ]
23    })
24  ]
25}

Options

files: An array of files object
- match: A regular expression to target files you want to preload
- attributes: Any attributes you want to use. The plugin will add the attribute rel="preload" by default.

Usage

The plugin is really simple to use. The plugin injects in headTags, before any link, the preload elements.

For example

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Webpack App</title>
6    <%= htmlWebpackPlugin.tags.headTags %>
7  </head>
8  <body>
9    <script src="index_bundle.js"></script>
10  </body>
11</html>

will generate

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Webpack App</title>
6    <link href="dist/fonts/font.woff2" rel="preload" type="font/woff2" crossorigin>
7    <link href="dist/css/main.css">
8  </head>
9  <body>
10    <script src="index_bundle.js"></script>
11  </body>
12</html>

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

Score

3

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More