Brotli extension for the HTML Webpack Plugin

Add .br suffix 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.

• Brotli extension for the HTML Webpack Plugin
  • Installation
  • Basic Usage

Installation

Install the plugin with npm:

$ npm install --save-dev html-webpack-brotli-plugin

Basic Usage

Require the plugin in your webpack config:

var HtmlWebpackBrotliPlugin = require("html-webpack-brotli-plugin");

Add the plugin to your webpack config as follows:

plugins: [
  new HtmlWebpackPlugin(),
  new BrotliPlugin({
    asset: "[path].br[query]",
    test: /\.(js|css|html|svg)$/,
    threshold: 10240,
    minRatio: 0.8
  }), // brotli plugin will generate the xxx.js.br file
  new HtmlWebpackBrotliPlugin()
];

The above configuration will actually do nothing due to the configuration defaults.

As soon as you set addBrotliExtension to true, the file name of the index.html's script tag will always be added .br suffix. Eg: xxx.js.br This is very useful if you are using brotli-webpack-plugin.

plugins: [
  new HtmlWebpackPlugin({
    addBrotliExtension: true
  }),
  new BrotliPlugin({
    asset: "[path].br[query]",
    test: /\.(js|css|html|svg)$/,
    threshold: 10240,
    minRatio: 0.8
  }), // brotli plugin will generate the xxx.js.br file
  new HtmlWebpackBrotliPlugin()
];

Even if you generate multiple files make sure that you add the HtmlWebpackBrotliPlugin only once:

plugins: [
  new HtmlWebpackPlugin({
    addBrotliExtension: true
  }),
  new HtmlWebpackPlugin({
    addBrotliExtension: true,
    filename: "demo.html"
  }),
  new HtmlWebpackPlugin({
    addBrotliExtension: false,
    filename: "test.html"
  }),
  new BrotliPlugin({
    asset: "[path].br[query]",
    test: /\.(js|css|html|svg)$/,
    threshold: 10240,
    minRatio: 0.8
  }), // brotli plugin will generate the xxx.js.br file
  new HtmlWebpackBrotliPlugin()
];