Html-webpack-inject-attributes-plugin NPM

html-webpack-inject-attributes-plugin

add custom attributes to inject tags

install

npm install html-webpack-inject-attributes-plugin -D

use

please use it after html-webpack-plugin, especially in webpack2+.

add to all inject tags, effective in all html

    plugins = [
        new HtmlWebpackPlugin(),
        new htmlWebpackInjectAttributesPlugin({
            inject: "true",
            async: true,
            test: {}
        })  // Object, key should be string, value can be string or function、object, object will stringify
    ]

you got

    <script type="text/javascript" src="index.js" inject="true" async test="{}"></script>

add to chunks in HtmlWebpackPlugin by add attributes to HtmlWebpackPlugin，only effective in the current html

    plugins = [
        new HtmlWebpackPlugin({
            attributes: {
                'data-src': function (tag) { return tag.attributes.src }
            },
        }),
        new htmlWebpackInjectAttributesPlugin()
    ]
    /**
     *  if value is a function, got three arguments。
     *  1、tag, ast of tag node
     *  2、compilation, you can get webpack build hash by compilation.hash
     *  3、index, index of trunks
    **/

you got

    <script type="text/javascript" src="index.js" data-src="index.js" inject="true"></script>

return false to prevent some tags add attributes

    plugins = [
        new HtmlWebpackPlugin({
            inject: true,
            hash: true,
            chunks: ['index'],
            attributes: {
                'data-src': function (tag, compilation, index) {
                    if (tag.tagName === 'script') {
                        return true;
                    }
                    return false;
                }
            },
        }),
        new htmlWebpackInjectAttributesPlugin()
    ]

style tags do not be affected

use chainWebpack

// vue.config.js
const htmlInject = require('html-webpack-inject-attributes-plugin')
module.exports = {
  chainWebpack: (config) => {
    config.plugin('html')
      .tap(args => {
        args[0].attributes = {
          async: true,
          inject: 'true'
        }
        return args
      })

    config.plugin('html-inject')
      .after('html')
      .use(htmlInject, [{
          common: 'true'
      }])
  },
}