前言
在前端开发中，构建工具对于现代化前端开发非常重要。而对于构建工具Webpack，构建流程中，html文件中引入的css和js等资源的自动化注入，是非常有必要的。而@intervolga/html-webpack-asset-template-plugin这个npm包就是用来自动化注入这些资源的。
什么是@intervolga/html-webpack-asset-template-plugin
@intervolga/html-webpack-asset-template-plugin是一个webpack插件，用于将webpack的输出资源(html、js、css)自动化注入到html模板中。这个库也支持使用传递外部模板，同时支持模板模板语言解释。
使用方法
- 安装
npm install @intervolga/html-webpack-asset-template-plugin
- 引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackAssetTemplatePlugin = require('@intervolga/html-webpack-asset-template-plugin');- 配置
在webpack.config.js中添加如下配置
-- -------------------- ---- -------
-------- -
--- -------------------
------ ----------
--------- -------------
---
--- --------------------------------
------- ------ -------
---
--其中HtmlWebpackPlugin就是webpack自带的一个插件，用来生成html文件，并且包含了title和template属性，用来生成html的title和模板。而HtmlWebpackAssetTemplatePlugin则是@intervolga/html-webpack-asset-template-plugin插件。其中，assets表示插入的资源类型，比如可以是'js'或'css'，甚至是二者的组合.
如果template以ejs为扩展名，可以使用ejs语法添加元数据
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------------------------- ----------
----- ------------------ ------------ ------------------------------------- ----
--- ----------------------------- --
-------
------
--- ------------------------------- --
-------
-------其中，通过htmlWebpackPlugin.tags头部，主体和底部分别获取相应的标签，并且使用<%= %>来写入变量。
- 示例
对于以下目录结构：
src ├── index.js ├── index.html └── style.css
webpack.config.js配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ------------------------------ - ----------------------------------------------------------
-------------- - -
------ -
---- -----------------
--
------- -
----- ----------------------- --------
--------- -------------------
--
-------- -
--- -------------------
------ ----------
--------- -------------
---
--- --------------------------------
------- ------ -------
---
--
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
--index.html模板：
-- -------------------- ---- -------
--------- -----
------
------
--------- -----------
----- ---------------- -----------------
-------
------
------- -----------------------------
-------
-------这个配置将会生成一个index.html文件，其中会自动注入bundle.js,style.css和template。因此，这个html文件中只需要写入必要的元素即可。
结论
@intervolga/html-webpack-asset-template-plugin插件是一个非常方便的webpack插件，可以自动注入html文件中的资源（js和css等）。因此，可以大大缩短前端构建时间，是一个比较推荐的npm依赖包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc1967216659e244182