html-webpack-exclude-assets-plugin

Exclude Assets extension for the HTML Webpack Plugin

Enhances html-webpack-plugin functionality by adding the {excludeAssets: RegExp | [RegExp]} option to allow you to exclude assets.

When adding an entry with third party css files, for example, style: ['bootstrap/dist/css/bootstrap.css'], to webpack, the injected scripts include style.js or style.[chunkhash].js. The excludeChunks option of html-webpack-plugin will exclude both style.css and style.js. With this plugin, you can keep style.css in and style.js out by setting excludeAssets: /style.*.js/.

You can also exclude CSS assets, for example, a theme CSS style, by setting excludeAssets: /theme.*.css/.

Installation

You must be running webpack on Node v4.0.0 or higher.

Note: style-loader's dependency loader-utils only supports Node v4.0.0 since v1.0. See style-loader's #174 pull request for details.

Install the plugin with npm:

$ npm install --save-dev html-webpack-exclude-assets-plugin

Basic Usage

Require the plugin in your webpack config:

var HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');

Add the plugin to your webpack config as follows:

plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackExcludeAssetsPlugin()
]  

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

When you set excludeAssets to an array of regular expressions or a single regular expression, the matched assets will be skipped when the chunks are injected into the HTML template.

plugins: [
  new HtmlWebpackPlugin({
    excludeAssets: [/style.*.js/] // exclude style.js or style.[chunkhash].js 
  }),
  new HtmlWebpackExcludeAssetsPlugin()
]