html-inline-script-webpack-plugin weekly downloads statistics

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 i html-inline-script-webpack-plugin -D

Webpack4

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

Usage

By default, the plugin will convert all the external script files to inline script block, and remove the original script file from build assets.

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

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

Options

Below are lists of options supported by this plugin:

Name	Description	Type
scriptMatchPattern	List of script files that should be processed and inject as inline script. This will be filtered using the output file name.	RegExp[]
htmlMatchPattern	List of HTML template files that should be processed by this plugin. Useful when you have multiple html-webpack-plugin initialized. This will be filtered using the options?.filename provided by html-webpack-plugin.	RegExp[]
assetPreservePattern	List of script files that should be preserved by this plugin after inserting them inline. This will be filtered using the output file name.	RegExp[]

Here are some examples illustrating how to use these options:

Process only script files that have file name start with runtime~ and app~

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

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

Process any script files but only have them inlined in index.html

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'static/index.webos.html',
    }),
    new HtmlWebpackPlugin({
      filename: 'page2.html',
      template: 'page2.html',
    }),
    new HtmlInlineScriptPlugin({
      htmlMatchPattern: [/index.html$/],
    }),
  ],
};

Process script files that have file name start with runtime~ and app~ and inject only to index.html

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'static/index.webos.html',
    }),
    new HtmlWebpackPlugin({
      filename: 'page2.html',
      template: 'page2.html',
    }),
    new HtmlInlineScriptPlugin({
      scriptMatchPattern: [/runtime~.+[.]js$/, /app~.+[.]js$/],
      htmlMatchPattern: [/index.html$/],
    }),
  ],
};

Process any script files but preserve main.js from build assets

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlInlineScriptPlugin({
      assetPreservePattern: [/main.js$/],
    }),
  ],
};
```…