html-webpack-transform-plugin

Assets Transform extension for the HTML Webpack Plugin

About

This plugin will allow you to transform asset tags generated by html-webpack-plugin.

Installation

Install the plugin with npm:

npm i --save-dev html-webpack-transform-plugin

Install the plugin with yarn:

yarn add --dev html-webpack-transform-plugin

Basic Usage

In the plugins section of your webpack config file, include the following:

plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackTransformPlugin()
]

Options

Name	Type	Default	Description
attributes	{Object}	{}	Map of attributes to add
pathPrefix	{String}	''	Path prefix to use with each asset url
transform	{Function}	tag => tag	A callback function that is execute on each tag to allow any transformation of tags. Function must return modified tag object
replacePublicPath	{Boolean}	false	Used with pathPrefix option. If true - publicPath from webpack options will be replaced with pathPrefix

Examples

Add crossorigin attribue for each script tag:

new HtmlWebpackTransformPlugin({
  attributes: {script: {crossorigin: 'anonymous'}},
}),

Replace public path with ejs template variable for dynamic paths with expresjs:

new HtmlWebpackTransformPlugin({
  pathPrefix: '<%= assetsPath %>/',
  replacePublicPath: true,
}),

Do anything else with the tags using transform callback:

new HtmlWebpackTransformPlugin({
  transform: tag => {
    // add additional properties
    // add path prefix or remove public path
    // or anything else
    return tag;
  },
}),

License