前言
在前端开发过程中，通常需要使用 webpack 来打包和构建代码。而 webpack-assets-by-type-plugin 是一个非常有用的 npm 包，可以生成根据文件类型也不同的加密 JS 和 CSS 的指纹。
安装
首先，需要在项目根目录下执行以下命令安装 webpack-assets-by-type-plugin：
npm install webpack-assets-by-type-plugin
配置
在 webpack 的配置文件中，引入这个插件，然后在 plugins 部分加入如下的配置项：
const { AssetsByTypePlugin } = require('webpack-assets-by-type-plugin');
// ...
plugins: [
// ...
new AssetsByTypePlugin()
// ...
]此时，Webpack 会在构建过程中自动为 output.path 下的文件生成加密后的文件指纹，不同类型的文件也会生成不同重要级别的哈希。
例如，对于一个名为 client.js 的文件，生成的指纹名称格式为 /js/client.ebda7729.js。文件如下：
// content of client.js const a = 1; console.log(a);
对应的输出为：
const a = 1; console.log(a); // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ // Added for webpack-assets-by-type-plugin export const __webpack_asset_client_js = "/js/client.ebda7729.js"
这样，当我们在 html 文件中引入这个打包后的 js 文件时（举例为 react.html），可以这样写：
-- -------------------- ---- -------
--------- -----
------
------
-------------- -------------- ------ ---------------
-------
------
---- ----------------
------- ----------------------------------------
-------
-------
参数
也可以在引用插件时传入一个对象，以配置插件的以及生成的戳的名称：
-- -------------------- ---- -------
----- - ------------------ - - -----------------------------------------
-- ---
-------- -
-- ---
-- --- ---------- --------- --- ------
--- --------------------
--------- ------ -- ------
----- ---------------- -- -------
--
-- ---
-其他可选配置，请参考 webpack-assets-by-type-plugin。
示例代码
完整示例代码如下：
webpack.config.js 文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- - ------------------ - - -----------------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
----- ----------------------- ----------
--------- -------------------------
--
------- -
------ -
-
----- --------
-------- ---------------
---- ----------------
--
-
----- ---------
---- ---------------- -------------
-
-
--
-------- -
--- --------------------
--
---------- -
----- -----
------------ -------------------- ---------
-
--index.js 文件：
import './index.css'; const a = 1; console.log(a);
index.css 文件：
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}react.html 文件：
-- -------------------- ---- -------
--------- -----
------
------
-------------- -------------- ------ ---------------
----- ---------------- -------------------------------
-------
------
---- ----------------
------- --------------------------------------
-------
-------通过以上配置，我们就可以使用 webpack-assets-by-type-plugin 自动生成加密后的 JS 和 CSS 指纹。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590881e8991b448d6669