PostCSS 是一个在处理 CSS 文件时使用的工具，它可以自动完成 CSS 文件的编译、转换、优化等工作，并且可以通过使用 PostCSS 插件来扩展其功能。
postcss-url-no-xxhash 是一个 PostCSS 插件，它的作用是为 CSS 文件中的 url() 函数自动去除文件名中的 xxhash，从而简化前端工程师的工作。
如何安装
首先，你需要在你的项目中安装 PostCSS：
npm install postcss --save-dev
然后，你需要下载 postcss-url-no-xxhash：
npm install postcss-url-no-xxhash --save-dev
如何使用
- 创建 PostCSS 配置文件
在你的项目根目录中，创建一个名为 postcss.config.js 的文件，添加下面的代码：
module.exports = {
plugins: [
require('postcss-url-no-xxhash')
]
}- 配置构建（webpack）
如果你使用 webpack 来构建你的项目，那么你需要按照如下方式配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------
-------------
----------------
-
-
-
--
-------- -
-------- ----------------------------------
-
-- 使用示例
假设你有一个 css 文件，如下所示：
.foo {
background-image: url('../images/background.png?xxhash=oFZ16NtBd4fljKdwg4xHmL');
}使用 postcss-url-no-xxhash 插件后，上述代码将被转换为如下形式：
.foo {
background-image: url('../images/background.png');
}效果与指导意义
在实际开发中，我们经常需要修改图片或者其他资源文件，为了保证缓存的有效性，通常会使用 xxhash 算法生成文件名来避免浏览器缓存，但这么做会让前端的工作变得更加复杂。使用 postcss-url-no-xxhash 插件后，我们可以自动去除文件名中的 xxhash，减轻前端工程师的工作负担，同时也不会影响缓存的有效性。
综上所述，postcss-url-no-xxhash 插件对前端工程师来说是一个非常实用的工具，可以大大提升开发效率，减少出错率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601481e8991b448de20a