前言
在前端开发过程中，使用npm包是很常见的事情，但是有时当我们需要引用一些资源文件时，例如图片或者CSS文件，就需要拼接一些相对路径来获取资源。为了方便解决这个问题，我们可以使用npm包 asset-resolver。本文将会一步步介绍使用 npm 包 asset-resolver 的过程，包括安装、使用和示例代码。
安装
首先，我们需要使用 npm 进行安装：
npm install asset-resolver --save-dev
用法
- 在 Webpack 配置中添加 resolver 配置项 在安装 asset-resolver 后，在 Webpack 配置文件中加入 resolver 配置项：
resolve: {
// ...
plugins: [
assetResolver({
// ...
})
],
},- 添加 asset 路径的别名
然后，在
plugins属性中添加这份配置项：
alias: {
asset: path.resolve(__dirname, "src/asset"),
},这里使用的是 webpack 的 alias 配置，它可以设置路径别名。在这里，我们给 src/asset 路径添加了 asset 别名。需要注意的是这个路径不一定要是 src/asset，你也可以配置你自己的路径作为别名。
- 将别名加入至 resolver 的配置中
最后，我们可以在 resolver 的配置中添加这份别名配置，并设置其
source属性为asset：
-- -------------------- ---- -------
-------- -
---------------
------ -
-
------- --------
------- ----------------------- --------------
--
--
---
--这份配置的意思是说，将所有指向 asset 路径的请求都替换成 dist/asset 路径。在这里，我们将 asset 别名对应到了生成目录：dist/asset，也就是说，访问 asset 目录下的路径资源，都将被替换成 dist/asset 目录下的资源路径。
示例代码
webpack.config.js:
-- -------------------- ---- -------
----- ------------- - --------------------------
----- ---- - ----------------
-------------- - -
-- ---
-------- -
-- ---
-------- -
---------------
------ -
-
------- --------
------- ----------------------- --------------
--
--
--
--
--
-- ---
--当你执行了上述的配置后，你就可以愉快地去用通用的路径 asset/images/xxx.png 来访问你项目的图片资源了。
总结
本文主要介绍了 npm 包 asset-resolver 的使用方法，通过这个 npm 包我们可以很方便地解决资源路径拼接的问题，而不用管实际位置是在何处。希望本文对大家对前端开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63891