Change assets extension plugin for the HTML Webpack Plugin


[![NPM Version][npm-image]][npm-url]
[![License Stats][npm-license]][npm-url]
[![Downloads Stats][npm-downloads]][npm-url]
[![Github stars][github-stars]][github-url]
[![Github issues][github-issues]][github-issues-url]
!Github Actions workflow


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

[![nodei.co][npm-io]][npm-url]

* Change assets extension plugin for the HTML Webpack Plugin
* Requirements
* Installation
* Basic Usage
* Contributing
* Contributors

Requirements

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

Installation

Install the plugin with npm:

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

Basic Usage

Require the plugin in your webpack config:

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

Add the plugin to your webpack config as follows:

`javascript
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.

`javascript
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:

`javascript
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. :)

1. Fork it ()
2. Create your feature branch. (git checkout -b feature/fooBar)
3. Make some changes.
4. State your changes. (git add .)
5. 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.
6. Push to the branch. (git push origin feature/fooBar`)
7. Create a new Pull Request.

[npm-image]: https://img.shields.io/npm/v/html-webpack-change-assets-extension-plugin.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/html-webpack-change-assets-extension-plugin
[npm-license]: https://img.shields.io/npm/l/html-webpack-change-assets-extension-plugin.svg
[npm-downloads]: https://img.shields.io/npm/dm/html-webpack-change-assets-extension-plugin.svg?style=flat-square
[github-url]: https://github.com/nerdmax/html-webpack-change-assets-extension-plugin
[github-issues]: https://img.shields.io/github/issues/nerdmax/html-webpack-change-assets-extension-plugin.svg
[github-issues-url]: https://github.com/nerdmax/html-webpack-change-assets-extension-plugin/issues
[github-stars]: https://img.shields.io/github/stars/nerdmax/html-webpack-change-assets-extension-plugin.svg
[travis-image]: https://img.shields.io/travis/dbader/node-html-webpack-change-assets-extension-plugin/master.svg?style=flat-square
[travis-url]: https://travis-ci.org/dbader/node-html-webpack-change-assets-extension-plugin
[npm-io]: https://nodei.co/npm/html-webpack-change-assets-extension-plugin.png?downloads=true&downloadRank=true&stars=true
[wiki]: https://github.com/nerdmax/html-webpack-change-assets-extension-plugin/wiki

Contributors

Thanks goes to these wonderful people (emoji key):

Max 💻 📖 🚇 ⚠️

Gary Valverde Hampton 🐛 🤔 💬

mayukh-ms 💻

Pawel Janik 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!