Change assets extension plugin for the HTML Webpack Plugin

Add customized extension to index.html file's script that generated by html-webpack-plugin. This is an extension plugin for the webpack plugin html-webpack-plugin - a plugin that simplifies the creation of HTML files to serve your webpack bundles.

Change assets extension plugin for the HTML Webpack Plugin

Requirements

This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

Installation

Install the plugin with npm:

npm install --save-dev html-webpack-change-assets-extension-plugin

Basic Usage

Require the plugin in your webpack config:

var HtmlWebpackChangeAssetsExtensionPlugin = require('html-webpack-change-assets-extension-plugin')

Add the plugin to your webpack config as follows:

plugins: [
  new HtmlWebpackPlugin(),
  new CompressionPlugin(), // compression plugin will generate the xxx.js.gz file
  new HtmlWebpackChangeAssetsExtensionPlugin()
]

The above configuration will actually do nothing due to the configuration defaults.

As soon as you set jsExtension to some values(Eg: jsExtension: ".gz"), the file name of the index.html's script tag will always be added by the certain suffix. Eg: xxx.js.gz This is very useful if you are using some compression plugins like: compression-webpack-plugin or brotli-webpack-plugin.

plugins: [
  new HtmlWebpackPlugin({
    jsExtension: '.gz'
  }),
  new CompressionPlugin(), // compression plugin will generate the xxx.js.gz file
  new HtmlWebpackChangeAssetsExtensionPlugin()
]

Even if you generate multiple files make sure that you add the HtmlWebpackChangeAssetsExtensionPlugin only once:

plugins: [
  new HtmlWebpackPlugin({
    jsExtension: '.gz'
  }),
  new HtmlWebpackPlugin({
    jsExtension: '.gz',
    filename: 'demo.html'
  }),
  new HtmlWebpackPlugin({
    jsExtension: '.gz',
    filename: 'test.html'
  }),
  new CompressionPlugin(), // compression plugin will generate the xxx.js.gz file
  new HtmlWebpackChangeAssetsExtensionPlugin()
]

Contributing

Feel free to make any improvements or changes. I'll add you to the contributors list below. :)

Fork it (https://github.com/nerdmax/html-webpack-change-assets-extension-plugin/fork)
Create your feature branch. (git checkout -b feature/fooBar)
Make some changes.
State your changes. (git add .)
Commit your changes (yarn commit). NOTE: This repo is following the conventional commits, and yarn commit is the easiest way to construct the commit message.
Push to the branch. (git push origin feature/fooBar)
Create a new Pull Request.