html-webpack-change-assets-extension-plugin
v1.3.1
Published
Add customized extension to index.html file's script that generated by html-webpack-plugin.
Downloads
3,094
Maintainers
Readme
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.
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, andyarn commit
is the easiest way to construct the commit message. - Push to the branch. (
git push origin feature/fooBar
) - Create a new Pull Request.
Contributors
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!