@wpe-tkpd/html-webpack-exclude-assets-plugin

Add the ability to exclude assets based on RegExp patterns

Usage no npm install needed!

<script type="module">
  import wpeTkpdHtmlWebpackExcludeAssetsPlugin from 'https://cdn.skypack.dev/@wpe-tkpd/html-webpack-exclude-assets-plugin';
</script>

README

Exclude Assets extension for the HTML Webpack Plugin

npm version Build Status js-semistandard-style

---- Start of forked information ----

  • Adding full support for webpack v5 and html-webpack-plugin v4
  • Change compilation get hooks
// from this
compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(this.PluginName, registerCb);
// to this
HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapAsync(this.PluginName, registerCb);
  • Hooks alterAssetTags now not give arguments head and body, so we modify the pluginData.assetTags.scripts and pluginData.assetTags.styles

---- End of forked information ----

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()
]