在前端开发中，我们经常需要对前端资源进行优化，在这个过程中，我们通常会使用 Webpack 对前端资源进行打包和优化，而 inc-webpack-plugin 就是一个非常实用的插件。本文将会为大家介绍 inc-webpack-plugin 的使用方法及详细说明，以及一份示例代码。
简介
inc-webpack-plugin 是一个 Webpack 插件，用于根据文件内容自动为文件名生成 hash 值，从而实现基于内容的增量更新。它可以有效的减小文件的尺寸，提高打包效率，同时提升用户体验。
安装
安装 inc-webpack-plugin 非常容易，只需要在项目根目录中运行以下命令即可：
npm install --save-dev inc-webpack-plugin
配置
在使用 inc-webpack-plugin 时，我们需要在 Webpack 配置文件中进行如下的配置：
-- -------------------- ---- -------
----- ---------------- - ------------------------------
-------------- - -
-- ------------
-------- -
--- ------------------
--------- ---------------- -- ----- -------- -------
---------- ------ -- -- ---- ----------- ----
--------- ------ -- -- ---- ----------- ----
-------- ---------- -- -------------
--
-
-上面的配置说明：
filename：生成的 manifest 文件名，可以不指定，默认为manifest.json。algorithm：hash 计算算法，可以选择md5、sha1、sha256、sha512等，默认为md5。encoding：hash 编码方式，可以选择hex、base64、latin1等，默认为hex。exclude：需要忽略的模块，可以是字符串或正则表达式，例如/vendor/表示忽略所有以vendor开头的模块。
使用
在配置好 inc-webpack-plugin 之后，我们可以在代码中使用自动生成的 hash 值了。我们只需要在需要引入的文件路径后面加上 ?inc 即可自动生成新的 hash 值，例如：
<!-- 引入 CSS 文件 --> <link rel="stylesheet" href="styles.css?inc">
// 引入 JS 文件 import script from 'app.js?inc';
当文件内容发生变更时，Webpack 会自动为文件生成新的 hash 值，并自动更新文件名，从而实现基于内容的增量更新。
示例代码
-- -------------------- ---- -------
----- ---- - ----------------
----- ---------------- - ------------------------------
-------------- - -
------ -
---- ---------------
------- -----------------
--
------- -
----- ----------------------- --------
--------- -----------------------
--
-------- -
--- -------------------
-
--在上面的示例代码中，我们配置了两个入口文件，分别是 app.js 和 vendor.js，同时我们在 output 配置中使用了 [chunkhash] 占位符，这样在打包时会自动生成不同的 hash 值，从而实现增量更新。
总结：
inc-webpack-plugin 是一个非常实用的 Webpack 插件，它能够自动为文件名生成 hash 值，从而实现基于内容的增量更新。使用 inc-webpack-plugin 可以有效地减小文件的尺寸，提高打包效率，同时提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554b081e8991b448d1e6e