html-webpack-assets-insert-plugin
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

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

Options Type Other
js Object
css Object

Options(js)

Options Type Other
prepend boolean Set the script tags insertion position. Default is true.
path Array Insert script tags according to array index.

Options(css)

Options Type Other
prepend boolean Set the link tags insertion position. Default is false.
path Array Insert link tags according to array index.

release

v1.0.4

  • modify readme

v1.0.1

  • initial release

v0.0.1

  • initial

Package Sidebar

Install

npm i html-webpack-assets-insert-plugin

Weekly Downloads

3

Version

1.0.5

License

MIT

Unpacked Size

8.95 kB

Total Files

4

Last publish

Collaborators

  • webkong