npmpackage.info

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

Other packages similar to @principalstudio/html-webpack-inject-preload

unplugin-inject-preload

3.0.0

Inject <link rel='preload'> for Webpack/ViteJS

@vue/preload-webpack-plugin

2.0.0

A webpack plugin for injecting <link rel='preload|prefecth'> into HtmlWebpackPlugin pages, with async chunk support

webpack-font-preload-plugin

1.5.0

A webpack plugin to allow preloading or prefetching of fonts.

preload-webpack-plugin

2.3.0

Enhances html-webpack-plugin with link rel=preload wiring capabilities for scripts

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

@principalstudio/html-webpack-inject-preload

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

1.2.7

MIT

TypeScript

850.00 B

1,511,929 3

Installations

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

Pull Requests

Open

1

Total

10

Closed

0

Merged

9

Issues

Open

1

Total

15

Closed

14

Releases

1.2.7

Published on 08 Mar 2021

1.2.6

Published on 26 Feb 2021

1.2.5

Published on 25 Feb 2021

1.2.4

Published on 22 Feb 2021

1.2.2

Published on 09 Feb 2021

1.2.1

Published on 01 Feb 2021

View all 11 releases

Developer

principalstudio

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>=10.23

Typescript Support

Yes

Node Version

12.20.2

NPM Version

7.6.0 Statistics

31 Stars

38 Commits

4 Forks

4 Watching

1 Branches

3 Contributors

Updated on 05 Oct 2024

Bundle Size

1.69 kB

Minified

850.00 B

Minified + Gzipped

Bundlephobia

Languages

TypeScript (81.42%)

HTML (11.57%)

CSS (4%)

JavaScript (3.02%)

Total Downloads

Cumulative downloads

Total Downloads

1,511,929

Last day

-10.1%

2,515

Compared to previous day

Last week

-3.4%

13,090

Compared to previous week

Last month

-14.1%

63,692

Compared to previous month

Last year

67.7%

712,288

Compared to previous year

Daily Downloads

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

Versions

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

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

0

Code-Review

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

0

Maintained

Determines if the project is "actively maintained".

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 2024-11-18

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