Registry / devops / html-inline-script-webpack-plugin

html-inline-script-webpack-plugin

JSON →
library3.2.1jsnpmunverified

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.

devops
npm install html-inline-script-webpack-plugin
github ↗package ↗
INSTALL
IMPORT
SIG · HTML-INLINE-SCRIPT
H
html-inline-script-webpack-plugin
devopsjavascriptv3.2.1
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

HtmlInlineScriptPlugin
✓ const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
✗ import HtmlInlineScriptPlugin from '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)
✓ import HtmlInlineScriptPlugin from 'html-inline-script-webpack-plugin';
✗ 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.

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/], }), ], };
Debug
Known issues
breakingv3.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.
affects: >=3.0.0
deprecatedv1.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.
affects: >=1.0.0 <2.0.0
gotchaThe 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.
affects: >=3.0.0
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.
affects: >=2.0.0
gotchaIn 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()`.
affects: >=3.0.0
Errors
Common errors & fixes
Error: HtmlInlineScriptPlugin is not a constructor
Using default import with CommonJS require incorrectly.
fix
Use `const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');`
HtmlWebpackPlugin requires HtmlWebpackPlugin to be configured
Missing html-webpack-plugin in plugins.
fix
Add `new HtmlWebpackPlugin()` to the plugins array.
Cannot find module 'html-webpack-plugin'
Missing peer dependency.
fix
Run `npm install --save-dev html-webpack-plugin`.
Upgrade
Version history
3.2.1latest on npm
Audit
Dependencies
html-webpack-pluginrequiredRequired peer dependency; the plugin hooks into its lifecycle to inject inline scripts.
webpackrequiredRequired peer dependency; plugin operates as a Webpack plugin.
Agent activity
4 hits · last 30 days
node
4
Resources
githubhttps://github.com/icelam/html-inline-script-webpack-plugin ↗
packagehttps://www.npmjs.com/package/html-inline-script-webpack-plugin ↗
html-inline-script-webpack-plugin — npm install html-inline-script-webpack-plugin · libregistry