/html-webpack-static-assets-plugin

HtmlWebpackPlugin extenstion that allows you to extends list of assets tags genereted to html file.

Primary LanguageJavaScriptMIT LicenseMIT

Install

  npm i --save-dev html-webpack-static-assets-plugin
  yarn add --dev html-webpack-static-assets-plugin

This 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>

Options

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

Single Tag Options

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