npm i --save-dev html-webpack-static-assets-plugin yarn add --dev html-webpack-static-assets-pluginThis is an extenstion of HtmlWebpackPlugin (version 4+ required!) . It allows you to extend a list of tags (head and body) created by HtmlWebpackPlugin. Remeber to add it after HtmlWebpackPlugin.
F.E preload fonts with a hashes in filename.
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackStaticAssetsPlugin = require("html-webpack-static-assets-plugin");
module.exports = {
[...], // Other options
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackStaticAssetsPlugin(HtmlWebpackPlugin, {
headTags: [
{
test: /\.woff/,
tagName: "link",
rel: "preload",
as: "font",
type: "font/[.ext]",
crossorigin: true
}
]
}),
]
}This will generate a file index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<link href="your_font_file_name.e233e73e5a234da8c6c66016c0c6c597.woff" rel="preload" as="font" type="font/woff" crossorigin>
<link href="assets/your_font_file_name_2.47dcabd1d0b56f2718585fc6691c5d9e.woff" rel="preload" as="font" type="font/woff" crossorigin>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>| name | type | Default | Description |
|---|---|---|---|
| bodyTags | array | [] | A list of tags to be added to the body tag |
| headTags | array | [] | A list of tags to be added to the head tag |
It's just an overview. You can add any type of tag attribute.
| name | type | Required | Description |
|---|---|---|---|
| test | RegExp | yes | RegExp to search for a files |
| tagName | String | yes | The name of the tag to be created |
| rel | String | no | "rel" attribute |
| as | String | no | "as" attribute |
| type | String | no | "type" attribute ([.ext] will be converted to a file extension) |
| crossorigin | Boolean | no | "crossorigin" attribute |