The html-webpack-static-assets-plugin from dawgoc

html-webpack-static-assets-plugin's Introduction

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

Recommend Projects