在前端开发中，为了使网页更快地加载，我们通常需要对资源文件进行压缩和优化。file-minify-webpack-plugin 是一个基于 Webpack 的 npm 包，可以帮助我们对静态资源文件进行压缩和优化。
安装
我们可以使用 npm，在命令行中输入以下命令进行安装：
npm install file-minify-webpack-plugin --save-dev
配置
在 Webpack 的配置文件中，我们需要引入 file-minify-webpack-plugin，并新增一个插件实例。以下是一个简单的配置示例：
-- -------------------- ---- -------
----- ----------------------- - --------------------------------------
-------------- - -
-- ---
-------- -
--- -------------------------
-- -------
-------- -------------------------
-------- ---------------------
---------- -------
-------------------- -----
--
-
-该配置会对所有 .js, .css, .html, .svg 文件进行压缩，并排除已经被压缩的 .min.js, .min.css 文件。使用 gzip 算法进行压缩，并且不会删除原有文件。
下面我们来详细解释一下各个配置项的含义。
include
默认值：/.*\.(js|css|html|svg)$/
要进行压缩的文件匹配规则。可以是一个字符串或正则表达式。默认值为匹配所有 .js, .css, .html, .svg 文件。如果指定了 include，那么只有匹配到的文件才会进行压缩。
exclude
默认值：/.*\.min\.(js|css)$/
排除不需要压缩的文件。可以是一个字符串或正则表达式。默认值为匹配所有以 .min.js 或 .min.css 结尾的文件。
algorithm
默认值：gzip
压缩算法。可以是 gzip 或 brotli。
deleteOriginalFiles
默认值：false
是否删除原有文件。默认值为 false，即不删除原有文件。
示例
假设我们有一个 index.js 文件，内容如下：
function add(a, b) {
return a + b;
}
console.log(add(1, 2));我们可以在 Webpack 的配置文件中进行如下配置：
-- -------------------- ---- -------
----- ----------------------- - --------------------------------------
-------------- - -
------ -------------
------- -
--------- -----------
--
-------- -
--- -------------------------
-------- ----------
---------- ------
--
-
-经过 webpack 打包后，bundle.js 文件会被压缩为 bundle.js.gz 文件。我们可以在浏览器中打开 index.html 文件，然后按下 F12 查看 Console 标签页面，看到控制台输出了 3，表示成功运行了 add 函数。
总结
使用 file-minify-webpack-plugin 可以帮助我们实现资源文件的压缩和优化，提高页面的性能和加载速度。在开发中，可以根据不同的配置项来实现不同的压缩策略。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5a51ab1864dac66f55