@dumlj/html-enhance-webpack-plugin

         

Html Enhance Webpack Plugin

Basic plugin use for enhance html webpack plugin.

BACKGROUND

INSTALL

# use npm
$ npm install --dev @dumlj/html-enhance-webpack-plugin
# use yarn
$ yarn add --dev @dumlj/html-enhance-webpack-plugin
# use pnpm
$ pnpm add @dumlj/html-enhance-webpack-plugin -D

USAGE

import { HtmlEnhanceWebpackPlugin } from '@dumlj/html-enhance-webpack-plugin'
import HtmlWebpackPlugin from 'html-webpack-plugin'

const htmlWebpackPluginInstance = new HtmlWebpackPlugin()
const htmlEnhancePluginInstance = new HtmlEnhanceWebpackPlugin({
  /** html filename of output */
  htmlNS: 'index.html',
  /** html-webpack-plugin **/
  HtmlWebpackPlugin: HtmlWebpackPlugin,
  /** instance of html-webpack-plugin */
  htmlWebpackPluginInstance: htmlWebpackPluginInstance,
})

// inject tags anywhrere
htmlEnhancePluginInstance.injectTags({
  scriptTags: [
    {
      url: 'https://cdn.dumlj.io//some.js',
    },
  ],
})

export default {
  // ....
  plugins: [
    htmlWebpackPluginInstance,
    htmlEnhancePluginInstance,
    // inject tags by inheritance
    new (class extends HtmlEnhanceWebpackPlugin {
      apply(compiler: Compiler) {
        super.apply(compiler)

        this.injectTags({
          // inject styles
          styleTags: [
            {
              url: 'https://cdn.dumlj.io/some.css',
            },
          ],
        })
      }
    })({
      /** html filename of output */
      htmlNS: 'index.html',
      /** html-webpack-plugin **/
      HtmlWebpackPlugin: HtmlWebpackPlugin,
      /** instance of html-webpack-plugin */
      htmlWebpackPluginInstance: htmlWebpackPluginInstance,
    }),
  ],
}

LIVE DEMO

INTERNAL DEPENDENCIES

@dumlj/html-enhance-webpack-plugin
├─┬ @dumlj/seed-webpack-plugin
│ ├─┬─ @dumlj/feature-updater
│ │ ├─── @dumlj/shell-lib
│ │ ├─── @dumlj/util-lib
│ │ └─── @dumlj/mock-libPRIVATE
│ └─── @dumlj/mock-libPRIVATE
└── @dumlj/util-lib