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

    Install

    npm i html-webpack-assets-insert-plugin

    DownloadsWeekly Downloads

    17

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    8.95 kB

    Total Files

    4

    Last publish

    Collaborators

    • webkong