@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
    }>

TODO

nodejs 库打包产物问题

• https://www.npmjs.com/package/babel-plugin-add-module-exports
• https://babeljs.io/docs/babel-preset-env
• https://github.com/open-data-plan/pangu