前言
在前端开发过程中，通常需要使用 webpack 来打包和构建代码。而 webpack-assets-by-type-plugin 是一个非常有用的 npm 包，可以生成根据文件类型也不同的加密 JS 和 CSS 的指纹。
安装
首先，需要在项目根目录下执行以下命令安装 webpack-assets-by-type-plugin：
--- ------- -----------------------------
配置
在 webpack 的配置文件中，引入这个插件，然后在 plugins 部分加入如下的配置项：
----- - ------------------ - - -----------------------------------------
-- ---
-------- -
-- ---
--- --------------------
-- ---
-此时，Webpack 会在构建过程中自动为 output.path 下的文件生成加密后的文件指纹，不同类型的文件也会生成不同重要级别的哈希。
例如，对于一个名为 client.js 的文件，生成的指纹名称格式为 /js/client.ebda7729.js。文件如下：
-- ------- -- --------- ----- - - -- ---------------
对应的输出为：
----- - - -- --------------- -- -------------------------- -- ----- --- ----------------------------- ------ ----- ------------------------- - ------------------------
这样，当我们在 html 文件中引入这个打包后的 js 文件时（举例为 react.html），可以这样写：
--------- -----
------
------
-------------- -------------- ------ ---------------
-------
------
---- ----------------
------- ----------------------------------------
-------
-------
参数
也可以在引用插件时传入一个对象，以配置插件的以及生成的戳的名称：
----- - ------------------ - - -----------------------------------------
-- ---
-------- -
-- ---
-- --- ---------- --------- --- ------
--- --------------------
--------- ------ -- ------
----- ---------------- -- -------
--
-- ---
-其他可选配置，请参考 webpack-assets-by-type-plugin。
示例代码
完整示例代码如下：
webpack.config.js 文件：
----- ---- - ----------------
----- - ------------------ - - -----------------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
----- ----------------------- ----------
--------- -------------------------
--
------- -
------ -
-
----- --------
-------- ---------------
---- ----------------
--
-
----- ---------
---- ---------------- -------------
-
-
--
-------- -
--- --------------------
--
---------- -
----- -----
------------ -------------------- ---------
-
--index.js 文件：
------ -------------- ----- - - -- ---------------
index.css 文件：
---- - ----------------- -------- ------------ ------ ----------- -
react.html 文件：
--------- -----
------
------
-------------- -------------- ------ ---------------
----- ---------------- -------------------------------
-------
------
---- ----------------
------- --------------------------------------
-------
-------通过以上配置，我们就可以使用 webpack-assets-by-type-plugin 自动生成加密后的 JS 和 CSS 指纹。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005590881e8991b448d6669