html-inline-webpack-plugin

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

// 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

<!-- When using html-webpack-plugin. -->
<script src="main.js" defer></script>

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.

<!-- When using this webpack plugin. (This example is a lot of omitted) -->
<script>
  addEventListener("DOMContentLoaded", () => console.log("This contents is into main.js"));
</script>

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"

Changelog

1.0.0

• Added a new "Loaded" option to HTMLInlineWebpackPluginScriptLoading. And "ASYNC" option has been removed.