Skip to content

Add customized extension to index.html file's script that generated by html-webpack-plugin.

License

Notifications You must be signed in to change notification settings

nerdmax/html-webpack-change-assets-extension-plugin

Repository files navigation

Change assets extension plugin for the HTML Webpack Plugin

styled with prettier Commitizen friendly All Contributors

NPM Version License Stats Downloads Stats Github stars Github issues Github Actions workflow codecov Dev Dependencies

Donate

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

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

  1. Fork it (https://github.com/nerdmax/html-webpack-change-assets-extension-plugin/fork)
  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.

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!

About

Add customized extension to index.html file's script that generated by html-webpack-plugin.

Resources

License

Stars

Watchers

Forks

Packages

No packages published