html-webpack-change-assets-extension-plugin

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #go #android #rust #deep-learning #linux #docker #macos #awesome #cli #pytorch #open-source

html-webpack-change-assets-extension-plugin

(★ 15)

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

html-webpack-change-assets-extension-plugin Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Change assets extension plugin for the HTML Webpack Plugin

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](https://raw.githubusercontent.com/nerdmax/html-webpack-change-assets-extension-plugin/master/)

[![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](https://github.com/nerdmax/html-webpack-change-assets-extension-plugin/actions/workflows/ci.yml/badge.svg)
[![codecov](https://codecov.io/gh/nerdmax/html-webpack-change-assets-extension-plugin/branch/master/graph/badge.svg)](https://codecov.io/gh/nerdmax/html-webpack-change-assets-extension-plugin)
[![Dev Dependencies](https://david-dm.org/nerdmax/html-webpack-change-assets-extension-plugin.svg)](https://david-dm.org/nerdmax/html-webpack-change-assets-extension-plugin?type=dev)

[![Donate](https://img.shields.io/badge/donate-paypal-blue.svg)](https://paypal.me/nerdmax)

> Add customized extension to index.html file's script that generated by html-webpack-plugin.
> This is an extension plugin for the [webpack](http://webpack.github.io) plugin [html-webpack-plugin](https://github.com/ampedandwired/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](#change-assets-extension-plugin-for-the-html-webpack-plugin)
  * [Requirements](#requirements)
  * [Installation](#installation)
  * [Basic Usage](#basic-usage)
  * [Contributing](#contributing)
  * [Contributors](#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](https://github.com/webpack-contrib/compression-webpack-plugin) or [brotli-webpack-plugin](https://github.com/mynameiswhm/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 (<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](https://www.conventionalcommits.org/), 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](https://github.com/kentcdodds/all-contributors#emoji-key)):

<table>
 <tr>
 <td align="center"><a href="https://github.com/nerdmax"><img src="https://avatars3.githubusercontent.com/u/18550349?v=4?s=100" width="100px;" alt=""/> Max</a> <a href="https://github.com/nerdmax/html-webpack-change-assets-extension-plugin/commits?author=nerdmax" title="Code">💻</a> <a href="https://github.com/nerdmax/html-webpack-change-assets-extension-plugin/commits?author=nerdmax" title="Documentation">📖</a> <a href="#infra-nerdmax" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/nerdmax/html-webpack-change-assets-extension-plugin/commits?author=nerdmax" title="Tests">⚠️</a></td>
 <td align="center"><a href="https://github.com/garyvh2"><img src="https://avatars1.githubusercontent.com/u/21265830?v=4?s=100" width="100px;" alt=""/> Gary Valverde Hampton</a> <a href="https://github.com/nerdmax/html-webpack-change-assets-extension-plugin/issues?q=author%3Agaryvh2" title="Bug reports">🐛</a> <a href="#ideas-garyvh2" title="Ideas, Planning, & Feedback">🤔</a> <a href="#question-garyvh2" title="Answering Questions">💬</a></td>
 <td align="center"><a href="https://github.com/mayukh-ms"><img src="https://avatars.githubusercontent.com/u/60102067?v=4?s=100" width="100px;" alt=""/> mayukh-ms</a> <a href="https://github.com/nerdmax/html-webpack-change-assets-extension-plugin/commits?author=mayukh-ms" title="Code">💻</a></td>
 <td align="center"><a href="https://github.com/Pawel-Janik"><img src="https://avatars.githubusercontent.com/u/2430425?v=4?s=100" width="100px;" alt=""/> Pawel Janik</a> <a href="https://github.com/nerdmax/html-webpack-change-assets-extension-plugin/issues?q=author%3APawel-Janik" title="Bug reports">🐛</a></td>
 </tr>
</table>

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

html-webpack-change-assets-extension-plugin

html-webpack-change-assets-extension-plugin Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

html-webpack-change-assets-extension-plugin

html-webpack-change-assets-extension-plugin Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README