在前端开发中，难免会遇到需要使用 webpack 编译打包的情况。而随着项目变得越来越大，对于资源文件的管理变得越来越复杂，需要使用 pug 语言来管理 html 文件的生产。但是，我们常常会遇到问题：如何在编译后自动生成 html 文件所依赖的 js、css 文件路径呢？这就需要用到我们今天要介绍的 npm 包：webpack-pug-manifest-plugin。
简介
webpack-pug-manifest-plugin 是一个可以帮助我们在使用 pug 语言管理 html 文件时，自动将 js、css 文件路径注入到 html 中的 webpack 插件。它会在 webpack 打包的时候自动分析资源文件的依赖关系，并将其映射到生成的 html 文件中。
安装
通过 npm 安装 webpack-pug-manifest-plugin，并将其添加到项目中的 webpack 配置文件中：
npm install webpack-pug-manifest-plugin
在 webpack 配置文件中，将插件作为一个新的插件添加：
-- -------------------- ---- -------
----- ------------------------ - ---------------------------------------
-------------- - -
-- ---
-------- -
--- --------------------------
-
-- ---
--配置
在 webpack 配置文件中，我们还需要为这个插件指定一些配置。
options
我们可以通过在插件中传入一个 options 对象来进行配置。以下是可用的 options 以及它们的含义：
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
filename |
string | manifest.json |
输出的资源映射文件名 |
basePath |
string | / |
资源相对路径的前缀 |
serialize |
Function | 将 path 对象序列化为对象的函数 | 定义了如何将 path 对象转换为一个键值对 |
filter |
RegExp 或 Function | 不过滤 | 定义哪些文件将被包含在资源映射中 |
map |
Function | 将应用程序路径转换为完全合格的 URL 的函数 | 定义如何将路径转换为 URL，以便在应用程序中使用 |
例如，我们可以将 WebpackPugManifestPlugin() 传入一个 options 对象来定义我们需要的资源路径前缀：
-- -------------------- ---- -------
----- ------------------------ - ---------------------------------------
-------------- - -
-- ---
-------- -
--- --------------------------
--------- ----------
--
-
-- ---
--使用示例
定义一个 pug 文件，如下所示：
-- -------------------- ---- -------
------- ----
---------------
----
---------------------
--------------------- ---------------------------- -------------------
---------------------------------- ------------------
----- -- ----
---------------------- -----------------------
----
- ----- ------
----------------------------在我们编译打包后，我们可以得到一个名为 index.html 的文件和一个名为 manifest.json 的资源映射文件。其中 index.html 文件中会自动注入 css 和 js 文件的路径：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----- ---------------------------- ------------------
--------- ------------
----- ---------------- ------------------------
-------
------
-------- ----------
------- ------------------------------
-------
-------以上便是 webpack-pug-manifest-plugin 的使用教程，在多人协作中使用该插件可以更好的管理资源文件，加快开发效率。
结尾
在 web 开发成熟后，资源的管理变得越来越复杂。webpack-pug-manifest-plugin 利用 webpack 的打包能力，在使用 pug 语言管理 html 文件时，实现资源路径自动注入。这不仅帮助我们提高开发效率，也减少了可能的错误。
不过，这个插件不是万能的。在某些情况下，我们仍然需要手动注入路径或使用其他方法解决问题。但是，在大多数情况下，webpack-pug-manifest-plugin 能够为我们提供很好的帮助。
以上便是今天的教程，希望能对大家有所指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bcd81e8991b448e570a