A HTML Webpack Plugin for injecting <link rel='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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<%= htmlWebpackPlugin.tags.headTags %>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>will generate
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<link href="dist/fonts/font.woff2" rel="preload" type="font/woff2" crossorigin>
<link href="dist/css/main.css">
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>