Webpack-plugin-html-append-tag NPM

添加html模板中的内容

该webpack-html-plugin插件会在生成的模板文件追加额外的标签元素，如渲染框架需要的挂载元素。

用法

初始化:

npm install webpack-plugin-html-append-tag

使用:

const WebpackPluginHtmlAppendTag = require('webpack-plugin-html-append-tag');

module.exports = {
  // ...
  plugins: [
    new WebpackPluginHtmlAppendTag({
      body: {
        before: [{
          tagName: 'div',
          selfClosingTag: false,
          voidTag: false,
          attributes: {
            id: 'app',
          },
        }],
      },
    }),
  ],
};

将会生成的模板文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试</title>
  </head>
  <body>
  <!-- ...webpack打包的资源文件 -->
  <div id="app"></div>
  <!-- ...其他内容 -->
</body>
</html>

构造函数选项

选项为一个对象，可以设置为：

{ [tagName: 'body' | 'head']: Tags}

意为在html模板中body和head的标签中添加的标签内容。值类型Tags具体类型是：

 typeof htmlWebpackPlugin.tags.headTags[0] | typeof htmlWebpackPlugin.tags.bodyTags[0] | typeof htmlWebpackPlugin.tags.headTags | typeof htmlWebpackPlugin.tags.bodyTags | { [hookName: 'before' | 'after']: typeof htmlWebpackPlugin.tags.headTags | typeof htmlWebpackPlugin.tags.bodyTags }

可以配置为一个标签对象，标签数组或者指定追加位置的标签数组集。

标签对象为html-plugin-webpack提供在模板中使用的htmlWebpackPlugin对象中tags的headTags或bodyTags，如：

const WebpackPluginHtmlAppendTag = require('webpack-plugin-html-append-tag');

module.exports = {
  // ...
  plugins: [
    new WebpackPluginHtmlAppendTag({
      body: {
        tagName: 'div',
        selfClosingTag: false,
        voidTag: false,
        attributes: {
          id: 'app',
        },
      },
      head: {
        tagName: 'link',
        selfClosingTag: false,
        voidTag: true,
        attributes: { rel: 'shortcut icon', href: 'favicon.ico' },
      },
    }),
  ],
};

也可以配置为一个标签数组，如：

const WebpackPluginHtmlAppendTag = require('webpack-plugin-html-append-tag');

module.exports = {
  // ...
  plugins: [
    new WebpackPluginHtmlAppendTag({
      body: [{
        tagName: 'div',
        selfClosingTag: false,
        voidTag: false,
        attributes: {
          id: 'app',
        },
      }, {
        tagName: 'span',
        selfClosingTag: false,
        voidTag: false,
        attributes: {
          class: 'red',
        },
      }],
      head: [{
        tagName: 'link',
        selfClosingTag: false,
        voidTag: true,
        attributes: { rel: 'shortcut icon', href: 'favicon.ico' },
      }, {
        tagName: 'link',
        selfClosingTag: false,
        voidTag: true,
        attributes: { rel: 'shortcut icon', href: 'favicon2.ico' },
      }],
    }),
  ],
};

还可以指定追加的位置，在webpack生成的一些标签之前还是之后，用于需要简单的顺序场景：

const WebpackPluginHtmlAppendTag = require('webpack-plugin-html-append-tag');

module.exports = {
  // ...
  plugins: [
    new WebpackPluginHtmlAppendTag({
      body: {
        before: [{
          tagName: 'div',
          selfClosingTag: false,
          voidTag: true,
          attributes: { id: 'app', style: 'color: red;' },
        }, {
          tagName: 'div',
          selfClosingTag: false,
          voidTag: true,
          attributes: { id: 'loading' },
        }],
        after: {
          tagName: 'iframe',
          selfClosingTag: false,
          voidTag: true,
          attributes: { src: 'http://path/to/advice' },
        },
      },
      head: {
        head: {
          before: {
            tagName: 'link',
            selfClosingTag: false,
            voidTag: true,
            attributes: { rel: 'shortcut icon', href: 'before.ico' },
          },
          after: [{
            tagName: 'link',
            selfClosingTag: false,
            voidTag: true,
            attributes: { rel: 'shortcut icon', href: 'after1.ico' },
          }, {
            tagName: 'link',
            selfClosingTag: false,
            voidTag: true,
            attributes: { rel: 'shortcut icon', href: 'after2.ico' },
          }],
      },
    }),
  ],
};

upman

html-webpack-plugin lodash

@everything-registry/sub-chunk-3132 @infinitebrahmanuniverse/nolb-webpack-p

1.0.1

2 years ago