HTML Inline Script Webpack Plugin for webpack (html-inline-script-webpack-plugin)

A webpack plugin for converting external script files <script src="app.js"></script> to inline script block <script>...</script>. Requires html-webpack-plugin to work.

Inspired by react-dev-utils created by Facebook.

Install

Webpack5

NPM

npm i html-inline-script-webpack-plugin -D

Yarn

yarn add html-inline-script-webpack-plugin -D

Webpack4

NPM

npm i html-inline-script-webpack-plugin@^1 -D

Yarn

yarn add html-inline-script-webpack-plugin@^1 -D

Usage

By default, the plugin will convert all the external script files to inline script block.

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlInlineScriptPlugin(),
  ]
}

To limit the scope of the plugin, specify lists of files you wish to convert in regular expressions:

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlInlineScriptPlugin([
      /runtime~.+[.]js$/,
      /app~.+[.]js$/
    ]),
  ]
}