html-webpack-inject-script-plugin

add a javascript asset to the HTML generated by html-webpack-plugin

Usage no npm install needed!

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

README

html-webpack-inject-script-plugin

add a javascript asset to the HTML generated by html-webpack-plugin

Installation

npm i html-webpack-inject-script-plugin

Basice Usage

The plugin will add the given JS file to the files Webpack knows about, and insert it into the js of assets html-webpack-plugin list injects into the generated html.

const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackInjectScriptPlugin = require("html-webpack-inject-script-plugin");

module.exports = {
  entry:  'index.js',
  output: {
    filename: 'bundle.js',
    path: 'dist'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackInjectScriptPlugin({
      filename: "./config.js",
    })
  ]
};

This will add a script tag to the HTML generated by html-webpack-plugin, and look like:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Webpack App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script defer src="config.js"></script>
  <script defer src="main.bundle.js"></script>
</head>

<body>
</body>

</html>

Options

filename

Type: String

this path of the js file

inline

Type: Boolean

Default: false

add javascript tag through internal or external links. if false, use external links.