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

`js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload');

module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackInjectPreload({
files: [
{
match: /.*\.woff2$/,
attributes: {as: 'font', type: 'font/woff2', crossorigin: true },
},
{
match: /vendors\.[a-z-0-9]*.css$/,
attributes: {as: 'style' },
},
]
})
]
}
`

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

`html





<%= htmlWebpackPlugin.tags.headTags %>





`

will generate

`html












``