npmpackage.info

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

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

html-webpack-plugin

5.6.3

Simplifies creation of HTML files to serve your webpack bundles

html-webpack-inline-source-plugin

0.0.10

Embed javascript and css source inline when using the webpack dev server or middleware

html-inline-css-webpack-plugin

1.11.2

☄️ A webpack plugin for convert external stylesheet to embedded stylesheet, aka document stylesheet

@ngtools/webpack

19.0.2

Webpack plugin that AoT compiles your Angular components and modules.

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

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

1.81 kB

2,461,533 3.4

Installations

npm install html-inline-script-webpack-plugin

Pull Requests

Open

6

Total

492

Closed

197

Merged

289

Issues

Open

3

Total

16

Closed

13

Releases

v3.2.1

Published on 09 Aug 2023

v3.2.0

Published on 02 Jun 2023

v3.1.0

Published on 05 Aug 2022

v3.0.1

Published on 24 Jul 2022

v3.0.0

Published on 27 Feb 2022

v1.1.6

Published on 04 Nov 2021

View all 18 releases

Developer

icelam

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>=14.0.0

Typescript Support

No

Node Version

14.19.3

NPM Version

6.14.17 Statistics

55 Stars

456 Commits

10 Forks

3 Watching

10 Branches

3 Contributors

Updated on 24 Aug 2024

Bundle Size

4.82 kB

Minified

1.81 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (61.16%)

HTML (33.13%)

JavaScript (5.44%)

Shell (0.27%)

Total Downloads

Cumulative downloads

Total Downloads

2,461,533

Last day

22.1%

9,227

Compared to previous day

Last week

24.3%

41,898

Compared to previous week

Last month

-3.8%

208,317

Compared to previous month

Last year

70.3%

1,337,515

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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.
This plugin does not support inlining scripts that are dynamically imported (the import() syntax). The reason is explained in this issue.

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.

10

SAST

Determines if the project uses static code analysis.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

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

0

Code-Review

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

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.4

/10

Last Scanned on 2024-11-18

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

Pull Requests

6

492

197

289

Issues

3

16

13

Releases

Developer

Developer Guide

CommonJS

>=14.0.0

No

14.19.3

6.14.17

Statistics

Bundle Size

4.82 kB

1.81 kB

Languages

Total Downloads

2,461,533

Daily Downloads

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

10

0

0

0

0

0

0

0

0

3.4

/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