@liutsing/html-webpack-plugin

测试 webpack module test pattern 规则的 loader

install

npm install @liutsing/html-webpack-plugin --save-dev
pnpm install @liutsing/html-webpack-plugin --save-dev
yarn add @liutsing/html-webpack-plugin -D

usage

const MapleHtmlWebpackPlugin = require('@liutsing/html-webpack-plugin')

const configs = {
  plugins: [new MapleHtmlWebpackPlugin({ options: '' })],
}

Resources

html-webpack-plugin

Learning Ideas

TODO 理解html-webpack-plugin提供出来的钩子函数的处理时机，能用来做什么事情

beforeAssetTagGeneration hook

    AsyncSeriesWaterfallHook<{
      assets: {
        publicPath: string,
        js: Array<{string}>,
        css: Array<{string}>,
        favicon?: string | undefined,
        manifest?: string | undefined
      },
      outputName: string,
      plugin: HtmlWebpackPlugin
    }>

alterAssetTags hook

    AsyncSeriesWaterfallHook<{
      assetTags: {
        scripts: Array<HtmlTagObject>,
        styles: Array<HtmlTagObject>,
        meta: Array<HtmlTagObject>,
      },
      publicPath: string,
      outputName: string,
      plugin: HtmlWebpackPlugin
    }>

alterAssetTagGroups hook

    AsyncSeriesWaterfallHook<{
      headTags: Array<HtmlTagObject | HtmlTagObject>,
      bodyTags: Array<HtmlTagObject | HtmlTagObject>,
      publicPath: string,
      outputName: string,
      plugin: HtmlWebpackPlugin
    }>

afterTemplateExecution hook

    AsyncSeriesWaterfallHook<{
      html: string,
      headTags: Array<HtmlTagObject | HtmlTagObject>,
      bodyTags: Array<HtmlTagObject | HtmlTagObject>,
      outputName: string,
      plugin: HtmlWebpackPlugin,
    }>

beforeEmit hook

    AsyncSeriesWaterfallHook<{
      html: string,
      outputName: string,
      plugin: HtmlWebpackPlugin,
    }>

afterEmit hook

    AsyncSeriesWaterfallHook<{
      outputName: string,
      plugin: HtmlWebpackPlugin
    }>

build

with babel

{
  "prebuild": "rimraf lib types",
  "prepublish": "pnpm run build",
  "build": "npm run build:commonjs",
  "postbuild": "npm run build:types",
  "build:commonjs": "babel src -d lib --extensions .ts --delete-dir-on-start",
  "build:types": "tsc --project tsconfig.build.json"
}

with rollup

{
  "prebuild": "rimraf lib",
  "prepublish": "pnpm run build",
  "build": "rollup -c rollup.config.js"
}

rollup.config.js:

const typescript = require('@rollup/plugin-typescript')
// https://rollupjs.org/javascript-api/#outputoptions-object

/**
 * @type {import('rollup').RollupOptions}
 *
 */
module.exports = {
  input: 'src/index.ts',
  output: [
    {
      file: 'lib/index.js',
      format: 'cjs',
      sourcemap: false,
    },
    {
      file: 'lib/index.mjs',
      format: 'es',
      sourcemap: false,
    },
  ],
  plugins: [
    typescript({
      tsconfig: './tsconfig.build.json',
    }),
  ],
}

TODO

nodejs 库打包产物问题