html-inline-script-webpack-plugin

3.2.1 verified Sat Apr 25 auth: no javascript

A Webpack plugin that converts external <script src> tags to inline <script> blocks, removing the original asset from build output. Current stable version 3.2.1 (Aug 2023) supports Webpack 5; use v1.x for Webpack 4. Requires html-webpack-plugin ^5.0.0 as a peer dependency. Key differentiators: regex-based matching for selective inlining (scriptMatchPattern, htmlMatchPattern), asset preservation (assetPreservePattern), and automatic escaping of </script> inside source code. Updated at a moderate pace with minor and patch releases quarterly. Compatible with multiple HtmlWebpackPlugin instances and respects public path configuration.

Common errors

error Error: HtmlInlineScriptPlugin is not a constructor ↓

cause Using default import with CommonJS require incorrectly.

fix

Use const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');

error HtmlWebpackPlugin requires HtmlWebpackPlugin to be configured ↓

cause Missing html-webpack-plugin in plugins.

fix

Add new HtmlWebpackPlugin() to the plugins array.

error Cannot find module 'html-webpack-plugin' ↓

cause Missing peer dependency.

fix

Run npm install --save-dev html-webpack-plugin.

Warnings

breaking v3.0.0 removed support for Webpack 4 and html-webpack-plugin v4. Upgrading without adjusting peer deps will cause runtime errors. ↓

fix Ensure webpack ^5.0.0 and html-webpack-plugin ^5.0.0 are installed.

deprecated v1.x branch is deprecated and no longer maintained. It only works with Webpack 4 and html-webpack-plugin v4. ↓

fix Upgrade to v3.x and update peer dependencies for Webpack 5.

gotcha The plugin deletes the original script file from build assets after inlining. If you need to keep the file, use the assetPreservePattern option. ↓

fix Add `assetPreservePattern: [/regex/]` to plugin options.

gotcha `scriptMatchPattern` is matched against the output file name, not the input source file name. Ensure the regex matches the final filename in the output path. ↓

fix Use patterns like `/runtime~.+[.]js$/` to match output chunks with hashes.

gotcha In webpack 5, if html-webpack-plugin is not configured correctly, the plugin may not find scripts to inline. Ensure HtmlWebpackPlugin is placed before HtmlInlineScriptPlugin in the plugins array. ↓

fix Always add `new HtmlWebpackPlugin()` before `new HtmlInlineScriptPlugin()`.

Install

npm install html-inline-script-webpack-plugin

yarn add html-inline-script-webpack-plugin

pnpm add html-inline-script-webpack-plugin

Imports

HtmlInlineScriptPlugin
wrong
```
import HtmlInlineScriptPlugin from 'html-inline-script-webpack-plugin';
```
correct
```
const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
```
CommonJS is the standard for Webpack config files. ESM imports may work only if bundler supports it or using .mjs extension; not officially documented.
HtmlInlineScriptPlugin (default import in TS)
wrong
```
import { HtmlInlineScriptPlugin } from 'html-inline-script-webpack-plugin';
```
correct
```
import HtmlInlineScriptPlugin from 'html-inline-script-webpack-plugin';
```
TypeScript users: the package does not ship its own types but can work with @types/html-inline-script-webpack-plugin if available. Default import is correct.
HtmlWebpackPlugin
```
const HtmlWebpackPlugin = require('html-webpack-plugin');
```
Required companion plugin; both must be in the plugins array, with HtmlWebpackPlugin before HtmlInlineScriptPlugin.

Quickstart

Basic Webpack config with HtmlWebpackPlugin and HtmlInlineScriptPlugin to inline the bundle.js script into the HTML output.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Inline Demo',
      template: './src/index.html',
    }),
    new HtmlInlineScriptPlugin({
      scriptMatchPattern: [/bundle/],
    }),
  ],
};