HtmlWebpackSkipAssetsPlugin

1.0.4 verified Sat Apr 25 auth: no javascript

A webpack plugin that works with html-webpack-plugin (>=3.0.0) to skip adding certain output files (chunks, assets) to the generated HTML. Current version 1.0.4, maintained, compatible with webpack 3–5. Acts as a drop-in replacement for the unmaintained html-webpack-exclude-assets-plugin. Supports glob patterns (minimatch), regex, or callback functions to filter assets. Allows configuration on either HtmlWebpackPlugin options or plugin constructor. Fixes CVEs and global regex issues in prior versions.

Common errors

error TypeError: Cannot read properties of undefined (reading 'src') ↓

cause Meta assets with null/undefined src or href attributes cause errors in earlier versions.

fix

Update to version 1.0.2 or later.

error Uncaught Error: HtmlWebpackSkipAssetsPlugin is not a constructor ↓

cause Importing the module incorrectly (assuming default export).

fix

Use destructured import: const { HtmlWebpackSkipAssetsPlugin } = require(...);

error ERROR in HtmlWebpackSkipAssetsPlugin: Plugin must be used after HtmlWebpackPlugin ↓

cause Plugin order in the plugins array is incorrect.

fix

Place HtmlWebpackSkipAssetsPlugin after HtmlWebpackPlugin in the plugins array.

Warnings

breaking In v1.0.0, support for webpack <3 and html-webpack-plugin <3 was dropped. ↓

fix Upgrade webpack to >=3 and html-webpack-plugin to >=3.

gotcha The plugin must be added AFTER HtmlWebpackPlugin in the plugins array. Order matters. ↓

fix Always list HtmlWebpackPlugin first, then HtmlWebpackSkipAssetsPlugin.

deprecated Using the excludeAssets option is deprecated in favor of skipAssets but still supported for migration. ↓

fix Replace excludeAssets with skipAssets in plugin configuration.

gotcha Glob patterns use minimatch, not webpack's test pattern syntax. Double-check patterns. ↓

fix Use minimatch glob syntax (e.g., 'polyfill.**.js' not 'polyfill.*.js').

gotcha Callback functions receive an HtmlTagObject from html-webpack-plugin, not the asset filename string. ↓

fix Access asset.tagName and asset.attributes, not the filename directly.

Install

npm install html-webpack-skip-assets-plugin

yarn add html-webpack-skip-assets-plugin

pnpm add html-webpack-skip-assets-plugin

Imports

HtmlWebpackSkipAssetsPlugin

wrong

const HtmlWebpackSkipAssetsPlugin = require('html-webpack-skip-assets-plugin');

correct

const { HtmlWebpackSkipAssetsPlugin } = require('html-webpack-skip-assets-plugin');

The plugin is a named export, not default. CommonJS requires destructuring.

HtmlWebpackSkipAssetsPlugin

import { HtmlWebpackSkipAssetsPlugin } from 'html-webpack-skip-assets-plugin';

ESM named import. No default export exists.

HtmlWebpackSkipAssetsPlugin
```
new HtmlWebpackSkipAssetsPlugin({ skipAssets: ['polyfill.*.js'] })
```
Plugin must be instantiated after HtmlWebpackPlugin in the plugins array.

Quickstart

Shows minimal webpack config with HtmlWebpackSkipAssetsPlugin to exclude polyfill and style JS files from the HTML output.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { HtmlWebpackSkipAssetsPlugin } = require('html-webpack-skip-assets-plugin');

module.exports = {
  entry: './src/index.js',
  output: { path: './dist', filename: '[name].[contenthash].js' },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new HtmlWebpackSkipAssetsPlugin({
      skipAssets: ['polyfill.*.js', /styles\..*\.js$/i]
    })
  ]
};