前言
在前端开发中，经常需要用到图标，字体等静态资源。而这些资源在引入的过程中，通常需要考虑到浏览器对格式的支持，以及引入方式等诸多细节。为了解决这些繁琐的问题，我们可以使用 chassets 这个 npm 包，轻松地管理我们的静态资源，并自动完成资源的格式转换和引入。
安装
npm install chassets --save-dev
使用
引入 chassets
要使用 chassets，需要在项目中引入该库。一般情况下，我们通常是在打包配置中将 chassets 引入，如下所示：
-- -------------------- ---- -------
-- ------- --
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------
-------------
-
------- -----------
-------- -
------- ------
--
--
--
--
--
--
--在上面的例子中，我们将 chassets loader 插入到了 css-loader 和 style-loader 中间。这样，在资源经过 css-loader 处理之后，chassets loader 会将符合规则的资源进行自动处理，并添加上前缀后引入到样式中。
配置项
chassets 提供了多个可选的配置项，下面一一讲解：
prefix
类型: string
说明: 前缀字符串，会自动加到引用的资源名之前。当需要使用多套静态资源时，设置不同的前缀可以帮助我们避免命名冲突问题。
formats
类型: array
说明: 指定需要处理的静态资源格式。默认开启 png, svg, gif, webp, jpg, jpeg, ttf, eot, woff, woff2, less, sass, scss, css, stylus, styl 等格式。
limit
类型: string / number
说明: 图片字体等资源的大小限制，当资源大小达到 limit 时，会被进行 base64 转码后直接嵌入到代码中，避免额外的网络请求。
outputPath
类型: string
说明: 处理后的资源输出路径。
示例
在上面的配置中，我们漏掉了一个很重要的配置项——规则选项，决定了哪些资源需要被 chassets 处理。下面是一个示例代码：
/* test.less */
@chac: "~chassets/@/ch-icon/0.0.4/assets";
.chicon {
.icon1 {
background-image: url("@{chac}/svg/loading.svg");
}
}在上面的代码中，我们定义了一个 chicon 的样式类，并在其中引入了一个 icon1 背景图，其路径为 chassets 包中的 ch-icon 路径下的 loading.svg 图片。当该 less 文件引入到 webpack 中，chassets 会自动对 loading.svg 图片进行处理，并以 ch- 形式的前缀引入到样式中。
总结
chassets 是一款非常好用的 npm 包，可以帮助前端开发者在静态资源引入的过程中，省去很多繁琐的工作，同时遵循了模块化开发的思路，大大提高了代码的可维护性。如果您还没有使用过 chassets，不妨试一试，相信它会成为您的得力助手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f87238a385564ab6d11