A HTML Webpack plugin for injecting <link rel='preload'>
npm install @principalstudio/html-webpack-inject-preload 
This plugin allows to add preload links anywhere you want.
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``