html-webpack-css-assets-plugin

一个 webpack插件, 用于在html-webpack-plugin将生成的 html里, 对link标签进行操作, 可以往link标签添加属性 或 直接在html里插入本地css文件;

安装

  npm i --save-dev html-webpack-css-assets-plugin
 

兼容性

• webpack >=4
• html-webpack-plugin >=3

警告 ⚠️⚠️⚠️

!!!注意: 如果使用 html-webpack-plugin@3.x.x 的版本,需要把 html-webpack-plugin 放在 html-webpack-css-assets-plugin 之前, 确保 html-webpack-plugin 先于 html-webpack-css-assets-plugin 注册.

使用

配置示例

webpack.config.js

const CssAssetsPlugin = require('html-webpack-css-assets-plugin')
 
module.exports = {
  entry: 'src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    plugins: [
      new HtmlWebpackPlugin()
    ],
    new CssAssetsPlugin({
      // 可选, 给所有 link 添加属性
      attrs: {
        "rel": "preload"
      },
      // 可选, 用于webpack 从入口打包而输出的css 文件, 添加属性
      bundle: {
         "as":"style"
      },
 
      //可选, 插入 css, assets 应该是远程地址, 因为不用有文件输出到打包目录
      online: [
        {
          append: true, // assets 列表的资源会添加到插入到后面, 默认false
          assets: [
            'http://a.b.com/aaa/index.css',
            'http://a.b.com/aaa/gc.css',
          ]
        },
        {
          assets: [
            'http://a.b.com/bbb/index.css',
            'http://a.b.com/bbb/gc.css',
          ]
        },
      ],
      // 可选
      // 插入link, href最终应该指向本地文件,
      // 本地资源会被复制到输出目录, 
      // 并对文件名添加 contentHash
      local: {
        chunkHash:true,
        root: './', // 本地资源的相对根目录目录, 默认为 当前工作目录,
        src: [
          './public/test.css'
        ]
      }
    })
  ]
}
 

搭配 html-webpack-plugin 后, 输出的 html部分为:

 
 
<link href=http://a.b.com/bbb/index.css rel=preload as=style>
<link href=http://a.b.com/bbb/gc.css rel=preload as=style>
<link href=./test-e3b0c442.css rel=preload as=style>
<link rel="preload" as="style" href="main-adasdfas.css">
<link href=http://a.b.com/aaa/index.css rel=preload as=style>
<link href=http://a.b.com/aaa/gc.css rel=preload as=style>
 

options

attrs

• 可选

为所有 css 添加 属性

{
  attrs: {
    'data-a': string
  },

}

bundle

• 可选

为 webpack 入口打包生成的 link 标签 添加属性

{
  bundle: {
    'data-bundle': 'bundle'
  }

}

online

• 可选

注意: 打包到输出目录

为 webpack 入口打包生成的 link 标签 添加属性

{
  online: [
    {
      append: true, // assets 列表的资源会添加到插入到后面, 默认false
      assets: [
        'http://a.b.com/aaa/index.js',
        'http://a.b.com/aaa/gc.js',
      ]
    },
    {
      assets: [
        'http://a.b.com/bbb/index.js',
        'http://a.b.com/bbb/gc.js',
      ]
    },
  ]

}

local

• root: 可选, 指定文件的根目录, 值相对路径则为当前的工作目录,
• src: 列出本地文件

为 webpack 入口打包生成的 link 标签 添加属性

{
  local: {
    root: <string>, // 可选, 默认: './', 
    src: Array<string>
  }

}

License

License