@web-pro/html-extend-webpack-plugin

html-extend-webpack-plugin

一个html-webpack-plugin扩展插件，该插件依赖于 html-webpack-plugin@4.0.0-beta.5 插件

仓库

• 中文文档
• GitHub 仓库

安装

使用npm安装

npm i @web-pro/html-extend-webpack-plugin -D

使用yarn安装

yarn add @web-pro/html-extend-webpack-plugin -D

作用

该插件的作用是在webpack中我们使用html-webpack-plugin插件生成 html模板文件时，向生成的模板（html）中插入第三方cdn形式的js 或 css

使用

在 webpack 的 plugin 中进行配置,

const HtmlExtendWebpackPlugin = require("@web-pro/html-extend-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  plugin:[
    new HtmlExtendWebpackPlugin(HtmlWebpackPlugin,options),
  ]
}

• 第一个参数HtmlWebpackPlugin为html-webpack-plugin插件对象

• 第二个参数options为配置对象：

{
  addJs:Array || Function,
  addCss:Array || Function,
}

1. 字段addJs添加引入js的地址（如CDN），值可以为数组或函数，

• 当为数组Array时，默认情况下打包时会将数组中的js地址依次插入到html模板中，位置处于打包出的<script></script>标签最前面;

• 当为函数Function时，函数的第一参数为一个数组，里边存储着打包时，引入的js链接地址，你可以将要添加的CDN插入到数组中某个位置，并返回一个新数组，这样打包出html模板中，引入的script顺序会按照你返回的数组中的顺序引入

2. 字段addCss字段同上，只不过是对css进行处理

例子

const HtmlExtendWebpackPlugin = require("@web-pro/html-extend-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  plugin:[
    new HtmlExtendWebpackPlugin(HtmlWebpackPlugin,{
      // 数组形式添加js
      addJs:["https://cdn.bootcss.com/vue/2.6.10/vue.common.js"], 


      // 函数形式添加js
      addJs:function(jsList){
        return jsList.push("https://cdn.bootcss.com/vue/2.6.10/vue.common.js")
      }, 

      // 数组形式添加css
      addCss:["https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-grid.css"], 


      // 函数形式添加css
      addCss:function(cssList){
        return cssList.push("https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-grid.css")
      }, 
    }),
  ]
}