前言
我是一名前端开发工程师，如果你也从事这方面的工作，那么你肯定离不开 npm 包管理工具。在本文中，我将介绍一个有用的 npm 包，它可以帮助我们在 webpack 打包时实现定制化的 html 输出，同时增加很多自定义的操作以及回调事件。
html-webpack-custom-callback-plugin 模块介绍
html-webpack-custom-callback-plugin 是一个 webpack 插件，主要作用是在打包过程中，对指定的 html 模板进行处理，并提供多种自定义的处理方式，例如：将 html 模板中的 js、css 文件提取出来，单独打包成文件，还可以添加多种自定义的操作（例如将指定的 css、js 文件插入到 html 中），而且自定义操作中的代码可以自己编写。这样可以使我们更好的掌控 html 文件的生成过程，让其满足我们的需求。
如何使用
安装
在 npm 官方网站上搜索 html-webpack-custom-callback-plugin，或者命令行执行：
npm install html-webpack-custom-callback-plugin --save-dev
配置
在 webpack.config.js 中配置插件：
-- -------------------- ---- -------
----- ------------------------------- - -----------------------------------------------
-------------- - -
-----
-------- -
--- ---------------------------------
--------- -- -- -
-- ----- --- ---- ------ --------- ----
-
--
-
--其中的 callback 是自定义操作的回调函数。在该函数中我们可以调用一些预制的方法，例如：
HtmlWebpackCustomCallbackPlugin.addJs()：添加 js 文件HtmlWebpackCustomCallbackPlugin.addCss()：添加 css 文件HtmlWebpackCustomCallbackPlugin.addHtml()：添加 html 代码HtmlWebpackCustomCallbackPlugin.extractJs()：提取 js 代码HtmlWebpackCustomCallbackPlugin.resolvePath()：解析文件路径HtmlWebpackCustomCallbackPlugin.renderTpl()：渲染 html 模板
此外，还有一些其他的配置选项：
-- -------------------- ---- -------
--- ---------------------------------
--------------- -- -- -
-- - -------- -------
--
--------- -- -- -
-- -------
--
-------------- -- -- -
-- - -------- -------
--
------------- --------------- -- ------
----------- --------- -- ---- ----
--------- ------------- -- -----
---------- ----- -- ---- ---- --
---- --- -- ------- --- --
--- --- -- ------- -- --
---------- --- -- ----- ---- --
----------- ------ -- ---- --- --
---------- ------ -- ---- -- --
---------- ----- -- --- --- ----- ---- -
--------- ---- -- --- -- ----- ---- -
--示例代码
下面是一个简单的使用示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------------------------- - -----------------------------------------------
-------------- - -
------ -----------
------- -
----- ----------------------- --------
--------- -------------------------
--
-------- -
--- ---------------------------------
--------- ---------------- --- -- -
-- -------
---------------------------------------
-----------------------------
---------------------
--
-- ---------
-------- ----------------
-
--
-
--总结
html-webpack-custom-callback-plugin 插件在搭建公司前端构建工具时可谓是一个至关重要的角色。它能够在 webpack 打包过程中，对 html 模板进行处理，并提供多种自定义的处理方式，从而让我们能够完全掌控 html 文件的输出过程，满足我们的需求。如果你想了解更多 webpack 插件的使用，可以查看 webpack 官方文档，或者阅读更多前端技术文章。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f77238a385564ab691f