Html-webpack-transform-plugin NPM

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;
  },
}),