npmpackage.info

Gathering detailed insights and metrics for html-inline-script-webpack-plugin

Other packages similar to html-inline-script-webpack-plugin

script-ext-html-webpack-plugin

2.1.5

Enhances html-webpack-plugin functionality with async and defer attributes for script elements

script-inline-escape-webpack-plugin

1.0.7

fix resource for the packaged content of script-ext-html-webpack-plugin

html-webpack-inline-script-plugin

1.0.1

Inject script into HTML template, extension plugin of html-webpack-plugin.

inline-script-webpack-plugin

1.0.3

a plugin of webpack to inline javascript into html with html-webpack-plugin

Gathering detailed insights and metrics for html-inline-script-webpack-plugin

html-inline-script-webpack-plugin - 3.2.1 | npmpackage.info

html-inline-script-webpack-plugin

A webpack plugin for converting external script files to inline script block. Requires 'html-webpack-plugin' to work.

3.2.1

MIT

TypeScript

24.54 kB

3.2

Installations

npm install html-inline-script-webpack-plugin

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Min. Node Version

>=14.0.0

Node Version

14.19.3

NPM Version

6.14.17 Pull Requests

Open

6

Total

492

Closed

197

Merged

289

Issues

Open

3

Total

16

Closed

13

Releases

v3.2.1

Updated on Aug 09, 2023

v3.2.0

Updated on Jun 02, 2023

v3.1.0

Updated on Aug 05, 2022

v3.0.1

Updated on Jul 24, 2022

v3.0.0

Updated on Feb 27, 2022

v1.1.6

Updated on Nov 04, 2021

View All 18 releases

Languages

TypeScript

HTML

JavaScript

Shell

TypeScript (61.16%)

HTML (33.13%)

JavaScript (5.44%)

Shell (0.27%)

Developer

icelam

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

57 Stars

456 Commits

10 Forks

2 Watchers

10 Branches

3 Contributors

Updated on Apr 28, 2025

Maintainers

View All 3 Contributors

Package Meta Information

Latest Version

3.2.1

Package Id

html-inline-script-webpack-plugin@3.2.1

Unpacked Size

24.54 kB

Size

7.21 kB

File Count

NPM Version

6.14.17

Node Version

14.19.3

Published on

Aug 09, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

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

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

Webpack4

1npm 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.

1const HtmlWebpackPlugin = require('html-webpack-plugin');
2const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
3
4module.exports = {
5  plugins: [new HtmlWebpackPlugin(), new HtmlInlineScriptPlugin()],
6};

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~`

1const HtmlWebpackPlugin = require('html-webpack-plugin');
2const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
3
4module.exports = {
5  plugins: [
6    new HtmlWebpackPlugin(),
7    new HtmlInlineScriptPlugin({
8      scriptMatchPattern: [/runtime~.+[.]js$/, /app~.+[.]js$/],
9    }),
10  ],
11};

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

1const HtmlWebpackPlugin = require('html-webpack-plugin');
2const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
3
4module.exports = {
5  plugins: [
6    new HtmlWebpackPlugin({
7      filename: 'index.html',
8      template: 'static/index.webos.html',
9    }),
10    new HtmlWebpackPlugin({
11      filename: 'page2.html',
12      template: 'page2.html',
13    }),
14    new HtmlInlineScriptPlugin({
15      htmlMatchPattern: [/index.html$/],
16    }),
17  ],
18};

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

1const HtmlWebpackPlugin = require('html-webpack-plugin');
2const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
3
4module.exports = {
5  plugins: [
6    new HtmlWebpackPlugin({
7      filename: 'index.html',
8      template: 'static/index.webos.html',
9    }),
10    new HtmlWebpackPlugin({
11      filename: 'page2.html',
12      template: 'page2.html',
13    }),
14    new HtmlInlineScriptPlugin({
15      scriptMatchPattern: [/runtime~.+[.]js$/, /app~.+[.]js$/],
16      htmlMatchPattern: [/index.html$/],
17    }),
18  ],
19};

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

1const HtmlWebpackPlugin = require('html-webpack-plugin');
2const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
3
4module.exports = {
5  plugins: [
6    new HtmlWebpackPlugin(),
7    new HtmlInlineScriptPlugin({
8      assetPreservePattern: [/main.js$/],
9    }),
10  ],
11};

Known limitations

This plugin does not transform Web Worker syntax like `new Worker(new URL('./worker.js', import.meta.url));``. It simply embeds the source code processed by webpack into HTML files, and emits any JavaScript files that is not processed by the plugin.
This plugin is designed to embed script content into HTML files for deployment to environments where only a single file can be uploaded, or where the script file itself is small enough that it doesn't warrant an additional HTTP request. It is not intended for use in development, and may fail if HMR is enabled.

Contributors

Thanks goes to these wonderful people:

@kmalakoff

@SorsOps

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

7

SAST

Determines if the project uses static code analysis.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/icelam/html-inline-script-webpack-plugin/ci.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/icelam/html-inline-script-webpack-plugin/ci.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/icelam/html-inline-script-webpack-plugin/ci.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/icelam/html-inline-script-webpack-plugin/codeql.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/icelam/html-inline-script-webpack-plugin/codeql.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/icelam/html-inline-script-webpack-plugin/codeql.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/icelam/html-inline-script-webpack-plugin/codeql.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/icelam/html-inline-script-webpack-plugin/release.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/icelam/html-inline-script-webpack-plugin/release.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/icelam/html-inline-script-webpack-plugin/release.yml/develop?enable=pin
Info: 0 out of 10 GitHub-owned GitHubAction dependencies pinned

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.2

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to html-inline-script-webpack-plugin

Other packages similar to html-inline-script-webpack-plugin

html-inline-script-webpack-plugin

Installations

Developer Guide

No

CommonJS

>=14.0.0

14.19.3

6.14.17

Pull Requests

6

492

197

289

Issues

3

16

13

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

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

Install

Webpack5

Webpack4

Usage

Options

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

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

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

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

Known limitations

Contributors

10

10

10

7

0

0

0

0

0

0

0

0

3.2

/10

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

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

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

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