inject-body-webpack-plugin

Webpack plugin that injects a custom string into the body of the html-webpack-plugin output.

Usage no npm install needed!

<script type="module">
  import injectBodyWebpackPlugin from 'https://cdn.skypack.dev/inject-body-webpack-plugin';
</script>

README

inject-body-webpack-plugin

License Sponsor inject-body-webpack-plugin
Build status Commits since v1.3.0 Last commit Issues
Latest version on npm Dependents Downloads

Webpack plugin that injects a custom string into the body of the html-webpack-plugin output.

Installation

inject-body-webpack-plugin on npm

npm install --save-dev inject-body-webpack-plugin@^1.3.0

inject-body-webpack-plugin on Yarn

yarn add --dev inject-body-webpack-plugin@^1.3.0

Example

Input

webpack.config.babel.js

import HtmlWebpackPlugin from "html-webpack-plugin"
import InjectBodyPlugin from "inject-body-webpack-plugin"

export default {
  plugins: [
    new HtmlWebpackPlugin({
      templateContent: "<html><body></body></html>"
    }),
    new InjectBodyPlugin({
      content: '<main id=root>Hi!</main>'
    }),
  ],
}

Output

index.html

<html><body><main id=root>Hi!</main></body></html>

Options

Type Default Info
content string <div id=root/> The text that will be inject into the final HTML output.
position string start If “start”, the content will be injected as close to the body opening tag as possible. If “end”, the content will be injected as close to the body ending tag as possible.

Development

Development hints for maintaining and improving inject-body-webpack-plugin

Setting up:

git clone git@github.com:jaid/inject-body-webpack-plugin.git
cd inject-body-webpack-plugin
npm install

Testing in production environment:

npm run test

License

MIT License
Copyright © 2021, Jaid <jaid.jsx@gmail.com> (https://github.com/jaid)