🚨 Shai-Hulud Strikes Again:834 Packages Compromised.Technical Analysis →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

html-webpack-assets-insert-plugin

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

html-webpack-assets-insert-plugin

Enhances html-webpack-plugin functionality with script and style elements insert to html file.

latest
Source
npmnpm
Version
1.0.5
Version published
Maintainers
1
Created
Source

Assets Extension for HTML Webpack Plugin

npm version Build status

NPM

Enhances html-webpack-plugin functionality with different deployment options for your html.

This is an extension plugin for the webpack plugin html-webpack-plugin - a plugin that simplifies the creation of HTML files to serve your webpack bundles.

The raw html-webpack-plugin incorporates all webpack-generated javascipt as <script> elements and css as <link> elements in the generated html. This plugin allows you to:

  • add script tags to html file;
  • add style tags to html file;

Installation

You must be running webpack (3.x, 4.x) on node 8+. Install the plugin with npm:

$ npm install html-webpack-assets-insert-plugin -D
# or
$ yarn install html-webpack-assets-insert-plugin -D

Not that you will need v3.x or v4.x of html-webpack-plugin

You may see an UNMET PEER DEPENDENCY warnings for webpack and various plugins.

Basic Usage

Add the plugin to your webpack config as follows:

plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackAssetsInsertPlugin({
    js: {
      prepend: true,
      path: [
        "https://cdn.jsdelivr.net/npm/vue",
        "https://cdn.jsdelivr.net/npm/vue-router",
      ],
    },
    css: {
      prepend: false,
      path: ["http://testcss.com/test.css"],
    },
  }),
];

The effect of the compiled:

<head>
  ....

  <link href="http://testcss.com/test.css" rel="stylesheet" />
</head>

<body>
  ...
  <!-- add by plugin -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router"></script>
  <!-- add by nuxt -->
  <script src="/_nuxt/runtime.9458cd8.js"></script>
  <script src="/_nuxt/commons/app.0872ce0.js"></script>
  <script src="/_nuxt/vendors~app.7b9299e.js"></script>
  <script src="/_nuxt/app.28d1ccd.js"></script>
</body>

In the vue-cli configuration file:

configureWebpack: (config) => {
  config.plugins.push(
    new HtmlWebpackAssetsInsertPlugin({
      js: {
        prepend: true,
        path: [""],
      },
      css: {
        path: [],
      },
    })
  );
};

In the nuxt.js configuration file:

build: {
    extend (config, { isClient }) {
      if (isClient) {
        config.plugins.push(new HtmlWebpackAssetsInsertPlugin({
          js: {
            prepend: true,
            path: [
              '',
              ''
            ]
          },
          css: {
            prepend: false
          }
        }))
        // externals config
        // config.externals = {
        //   vue: 'Vue',
        //   axios: 'axios',
        // }
      }
    }
  }

The order is important - the plugin must come after HtmlWebpackPlugin.

Options

OptionsTypeOther
jsObject
cssObject

Options(js)

OptionsTypeOther
prependbooleanSet the script tags insertion position. Default is true.
pathArrayInsert script tags according to array index.

Options(css)

OptionsTypeOther
prependbooleanSet the link tags insertion position. Default is false.
pathArrayInsert link tags according to array index.

release

v1.0.4

  • modify readme

v1.0.1

  • initial release

v0.0.1

  • initial

Keywords

webpack
plugin
html-webpack-plugin
css
script
append

FAQs

Package last updated on 20 Aug 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Deno 2.6 + Socket: Supply Chain Defense In Your CLI

Security News

Deno 2.6 + Socket: Supply Chain Defense In Your CLI

Deno 2.6 introduces deno audit with a new --socket flag that plugs directly into Socket to bring supply chain security checks into the Deno CLI.

By Sarah Gooding  -  Dec 12, 2025