https://github.com/mttankkeo/html-inline-webpack-plugin
This webpack plugin package is bundling related HTML files by injecting inline tags.
https://github.com/mttankkeo/html-inline-webpack-plugin
bundler html inline webpack-plugin
Last synced: about 1 month ago
JSON representation
This webpack plugin package is bundling related HTML files by injecting inline tags.
- Host: GitHub
- URL: https://github.com/mttankkeo/html-inline-webpack-plugin
- Owner: MTtankkeo
- License: mit
- Created: 2024-08-21T21:11:54.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-09-07T12:59:53.000Z (9 months ago)
- Last Synced: 2025-04-11T11:19:39.454Z (about 2 months ago)
- Topics: bundler, html, inline, webpack-plugin
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/html-inline-webpack-plugin
- Size: 58.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
HTML Inline Webpack Plugin
Version
v1.0.0
# Introduction
This webpack plugin package is bundling related HTML files by injecting inline tags.
> [!WARNING]
> This plugin is not compatible with `webpack-dev-server` if using "inline" option, please ensure that "inline" option is explicitly set to false during development. This option should only be used in production mode.
> See Also, If you want the change-log by version for this package. refer to [Change Log](CHANGELOG.md) for details.
## Support Current Status
| Type | Status | Support |
| ---- | ------ | ------- |
| Script | Tested for required dev-enviorment. | ✅ |
| Styles | Tested for required dev-enviorment. | ✅ |
| Others | Not supported, but you can to notify to me by GitBub issues. | 🟥 |
# Install by NPM
To install this package in your project, enter the following command.
> When you want to update this package, enter `npm update html-inline-webpack-plugin --save` in the terminal to run it.
```
npm install html-inline-webpack-plugin --save-dev
```
## And then In webpack.config.js
```cjs
// In webpack.config.js
const HTMLInlinePlugin = require("html-inline-webpack-plugin");
module.exports = {
// Add an instance of HTMLInlinePlugin to plugins property value.
plugins: [new HTMLInlinePlugin({...})]
}
```
## How is a bundle transpiled when this plugin applyed?
The example below demonstrates the simplest of many possible transformations.
### From
```html
```
### From
But in reality, Additional code is inserted to address potential issues that may arise during the process of converting script into an inline format.
Therefore this is just a very simple example.
```html
addEventListener("DOMContentLoaded", () => console.log("This contents is into main.js"));
```
## The Properties of HTMLInlineWebpackPluginOptions
| Name | Description | type |
| ---- | ----------- | ---- |
| template | The path of the HTML document to finally insert an assets. | string |
| filename | The path of the HTML document that is outputed finally. | string |
| favicon? | The path of the favicon.ico file about the HTML document. | string |
| inject? | Whether the assets will ultimately be injected into the given HTML document template. | boolean |
| injcetType? | The type of the document element to which you want to inject the assets. | "HEAD" \| "BODY" |
| injectAsBlob? | Whether it loads and operates asynchronously in the same way as the existing method, but handles loading data as a blob to avoid re-requesting resources from the server. | boolean |
| inline? | Whether to reduce the number of resource requests to the server by injecting asset content all at once into the document template instead of using the traditional asynchronous request method. | boolean |
| pretty? | Not ready a comment about this. | boolean |
| processStage? | Not ready a comment about this. | "OPTIMIZE" \| "OPTIMIZE_INLINE" |
| scriptLoading? | Not ready a comment about this. | "DEFAULT" \| "LOADED" \| "DEFER" |