html-webpack-inline-source-plugin

0.0.10 verified Sat Apr 25 auth: no javascript deprecated

Webpack plugin (v0.0.10) that inlines JavaScript and CSS source into HTML output when using webpack-dev-server or middleware. Integrates with html-webpack-plugin to replace external script/style tags with inline content. Primarily used for performance optimization in development, but also works in production builds. Requires html-webpack-plugin and must be placed after it in plugins array. No active maintenance since 2020.

Common errors

error Error: Cannot find module 'html-webpack-inline-source-plugin' ↓

cause Package not installed or version mismatch

fix

npm install html-webpack-inline-source-plugin --save-dev

error TypeError: Cannot read property 'hooks' of undefined ↓

cause Missing or wrong html-webpack-plugin version (v5 incompatible)

fix

Use html-webpack-plugin v4 or switch to a Webpack 5 compatible plugin.

error InlineSourcePlugin is not a constructor ↓

cause CommonJS require used incorrectly (e.g., import instead of require)

fix

Use const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

Warnings

deprecated Package is unmaintained since 2020; no support for Webpack 5. ↓

fix Use html-inline-source-webpack-plugin or inline-source-webpack-plugin for Webpack 5.

breaking Requires html-webpack-plugin v3 or v4; incompatible with v5 ↓

fix Pin html-webpack-plugin to ^3.2.0 or ^4.5.0.

gotcha Plugin must be placed after HtmlWebpackPlugin in plugins array, otherwise no effect. ↓

fix Always instantiate HtmlWebpackInlineSourcePlugin after HtmlWebpackPlugin.

gotcha Only inlines files that are referenced as <script> or <link> tags in the HTML template; dynamic chunks not inlined. ↓

fix Ensure scripts/styles are directly in template, not added via webpack entry.

Install

npm install html-webpack-inline-source-plugin

yarn add html-webpack-inline-source-plugin

pnpm add html-webpack-inline-source-plugin

Imports

default

wrong

import HtmlWebpackInlineSourcePlugin from 'html-webpack-inline-source-plugin';

correct

const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

Does not support ESM imports; only CommonJS works.

HtmlWebpackInlineSourcePlugin
wrong
```
new HtmlWebpackInlineSourcePlugin({ ... }) with unknown options
```
correct
```
new HtmlWebpackInlineSourcePlugin()
```
Plugin constructor accepts no options; all configuration is global.

HtmlWebpackPlugin

wrong

import HtmlWebpackPlugin from 'html-webpack-plugin'; in older versions

correct

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

Must require here too because it's a peer.

Quickstart

Basic webpack configuration that inlines all JS and CSS into the HTML file via html-webpack-plugin.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = {
  entry: './src/index.js',
  output: { path: './dist', filename: 'bundle.js' },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './src/index.html'
    }),
    new HtmlWebpackInlineSourcePlugin()
  ]
};