{"id":20101,"library":"html-inline-script-webpack-plugin","title":"html-inline-script-webpack-plugin","description":"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.","status":"active","version":"3.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/icelam/html-inline-script-webpack-plugin","tags":["javascript","webpack","webpack4","webpack5","webpack-plugin","html-webpack-plugin","inline","internal","embedded"],"install":[{"cmd":"npm install html-inline-script-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add html-inline-script-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add html-inline-script-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency; the plugin hooks into its lifecycle to inject inline scripts.","package":"html-webpack-plugin","optional":false},{"reason":"Required peer dependency; plugin operates as a Webpack plugin.","package":"webpack","optional":false}],"imports":[{"note":"CommonJS is the standard for Webpack config files. ESM imports may work only if bundler supports it or using .mjs extension; not officially documented.","wrong":"import HtmlInlineScriptPlugin from 'html-inline-script-webpack-plugin';","symbol":"HtmlInlineScriptPlugin","correct":"const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');"},{"note":"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.","wrong":"import { HtmlInlineScriptPlugin } from 'html-inline-script-webpack-plugin';","symbol":"HtmlInlineScriptPlugin (default import in TS)","correct":"import HtmlInlineScriptPlugin from 'html-inline-script-webpack-plugin';"},{"note":"Required companion plugin; both must be in the plugins array, with HtmlWebpackPlugin before HtmlInlineScriptPlugin.","wrong":null,"symbol":"HtmlWebpackPlugin","correct":"const HtmlWebpackPlugin = require('html-webpack-plugin');"}],"quickstart":{"code":"const HtmlWebpackPlugin = require('html-webpack-plugin');\nconst HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: __dirname + '/dist',\n    filename: 'bundle.js',\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      title: 'Inline Demo',\n      template: './src/index.html',\n    }),\n    new HtmlInlineScriptPlugin({\n      scriptMatchPattern: [/bundle/],\n    }),\n  ],\n};","lang":"javascript","description":"Basic Webpack config with HtmlWebpackPlugin and HtmlInlineScriptPlugin to inline the bundle.js script into the HTML output."},"warnings":[{"fix":"Ensure webpack ^5.0.0 and html-webpack-plugin ^5.0.0 are installed.","message":"v3.0.0 removed support for Webpack 4 and html-webpack-plugin v4. Upgrading without adjusting peer deps will cause runtime errors.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Upgrade to v3.x and update peer dependencies for Webpack 5.","message":"v1.x branch is deprecated and no longer maintained. It only works with Webpack 4 and html-webpack-plugin v4.","severity":"deprecated","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Add `assetPreservePattern: [/regex/]` to plugin options.","message":"The plugin deletes the original script file from build assets after inlining. If you need to keep the file, use the assetPreservePattern option.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use patterns like `/runtime~.+[.]js$/` to match output chunks with hashes.","message":"`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.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Always add `new HtmlWebpackPlugin()` before `new HtmlInlineScriptPlugin()`.","message":"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.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use `const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');`","cause":"Using default import with CommonJS require incorrectly.","error":"Error: HtmlInlineScriptPlugin is not a constructor"},{"fix":"Add `new HtmlWebpackPlugin()` to the plugins array.","cause":"Missing html-webpack-plugin in plugins.","error":"HtmlWebpackPlugin requires HtmlWebpackPlugin to be configured"},{"fix":"Run `npm install --save-dev html-webpack-plugin`.","cause":"Missing peer dependency.","error":"Cannot find module 'html-webpack-plugin'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}