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.
- entryPointWebpackPreload: boolean. support
/* webpackPreload: true */magic comment, when preloading files in initial chunk, see this issue in detail.crossoriginfor font will be add automatically.
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>