Add customized extension to index.html file's script that generated by html-webpack-plugin.
npm install html-webpack-change-assets-extension-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
This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.
Install the plugin with npm:
``shell`
npm install --save-dev html-webpack-change-assets-extension-plugin
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()
]
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)git add .
3. Make some changes.
4. State your changes. ()yarn commit
5. Commit your changes (). NOTE: This repo is following the conventional commits, and yarn commit is the easiest way to construct the commit message.git push origin feature/fooBar`)
6. Push to the branch. (
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
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!