inline-source-webpack-plugin

3.0.1 verified Sat Apr 25 auth: no javascript

A webpack plugin to embed CSS/JS resources inline into HTML output using inline-source, requiring html-webpack-plugin. Version 3.0.1 supports webpack 5 and Node >=16. Minimal configuration needed; supports compression, custom root paths, and regex-based asset matching. Differentiators: tight integration with html-webpack-plugin, support for inline-asset attributes, and no-asset-match handling.

Common errors

error Error: InlineSourceWebpackPlugin is not a constructor ↓

cause Incorrect import: using named import instead of default import in ESM

fix

Use: import InlineSourceWebpackPlugin from 'inline-source-webpack-plugin';

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

cause Missing peer dependency html-webpack-plugin

fix

Install: npm install html-webpack-plugin --save-dev

error Error: InlineSourceWebpackPlugin is not a constructor ↓

cause Using require() in ESM context without default export

fix

If using ESM, use default import: import InlineSourceWebpackPlugin from 'inline-source-webpack-plugin';

Warnings

breaking Node.js version must be >=16.0.0 for v3.x ↓

fix Upgrade Node.js to v16 or later.

breaking Webpack 5 required for v2.0.0+ ↓

fix Upgrade webpack to v5 or use v1.x with webpack 4.

deprecated The 'inline-bundle' attribute was renamed to 'inline-asset' in v1.2.0 ↓

fix Use 'inline-asset' instead of 'inline-bundle' in HTML attributes.

gotcha Using 'inline-asset' with a regex may cause 'no asset match' warnings in development mode ↓

fix Ignore warnings in dev mode or set noAssetMatch to 'none' to suppress.

gotcha Do not use 'src' or 'href' attributes when using 'inline-asset'; use only 'inline-asset' attribute ↓

fix Remove src/href and rely solely on inline-asset attribute for webpack-generated assets.

Install

npm install inline-source-webpack-plugin

yarn add inline-source-webpack-plugin

pnpm add inline-source-webpack-plugin

Imports

default
```
const InlineSourceWebpackPlugin = require('inline-source-webpack-plugin');
```
CommonJS import is the standard due to Node.js compatibility; no default export in ESM.

default

wrong

import { InlineSourceWebpackPlugin } from 'inline-source-webpack-plugin';

correct

import InlineSourceWebpackPlugin from 'inline-source-webpack-plugin';

ESM import uses default import. Named import will fail as the plugin is exported as default.

Quickstart

Minimal webpack config with HtmlWebpackPlugin and InlineSourceWebpackPlugin, enabling compression and warning on unmatched assets.

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.[contenthash].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new InlineSourceWebpackPlugin({
      compress: true,
      rootpath: './src',
      noAssetMatch: 'warn'
    })
  ]
};