在前端开发中，我们经常需要引用一些模块、组件或者静态资源，但是这些资源的路径可能比较长或者复杂，给我们带来了不便。为了解决这个问题，webpack 提供了 alias 配置选项，可以将长路径映射成短名字，方便我们在代码中引用。
应用场景
- 绝对路径引用
当我们在项目中引用某个模块或组件时，需要使用相对路径或绝对路径，比如：
import React from '../../node_modules/react'; import Header from '../components/Header';
这样的路径显然比较冗长，而且如果目录结构发生变化，路径也需要相应调整。使用 alias 配置可以将路径简化成一个短名字，比如：
import React from 'react'; import Header from '@/components/Header';
这样就不需要写长长的路径了，而且即使目录结构发生变化，也不需要修改代码。
- 配置别名
有些第三方库或框架的文件名比较长或不太好记，我们可以使用 alias 配置为它们起一个别名，比如：
import Vue from 'vue/dist/vue.esm.js'; import $ from 'jquery/dist/jquery.min.js';
可以改成：
import Vue from 'vue'; import $ from 'jquery';
方法详解
在 webpack 配置文件中，通过 resolve.alias 属性配置 alias，比如：
-- -------------------- ---- ------- -------------- - - -- --- -------- - ------ - ---- ----------------------- ------- -------- ----------------------- ---------------------- ------- ---------------------- ---------- ---------------------------- - - --展开代码
其中，'@' 表示项目根目录，'react' 表示第三方库 react 的路径，'vue$' 表示以 'vue' 结尾的路径，'jquery$' 表示以 'jquery' 结尾的路径。
注意，如果路径是以文件扩展名结尾的，需要使用 $ 符号表示精确匹配。如果不使用 $ 符号，则会匹配到任何以 'vue' 或 'jquery' 开头的路径。
示例代码
下面是一个示例代码，演示如何使用 alias 配置：
-- -------------------- ---- ------- -- ----------------- ----- ---- - ---------------- -------------- - - ------ ----------------- ------- - --------- ------------ ----- ----------------------- ------- -- -------- - ------ - ---- ----------------------- ------- -------- ----------------------- ---------------------- ------- ---------------------- ---------- ---------------------------- - -- ------- - ------ - - ----- ---------- -------- --------------- ---- - ------- --------------- -------- - -------- --------------------- ---------------------- - - - - - -- -- ------------ ------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- ------ ------ - ---- --------- ------ --- ---- ------------------- ---------------- ---- --- ------------------------------- -- --- ----- --- ------- ----- - -------- ------ ----- - --- -------------------------展开代码
在上面的示例中，我们定义了四个 alias：
- '@' 表示项目根目录，用于简化路径。
- 'react' 表示第三方库 react 的路径。
- 'vue$' 表示以 'vue' 结尾的路径，用于精确匹配 vue.esm.js 文件。
- 'jquery$' 表示以 'jquery' 结尾的路径，用于精确匹配 jquery.min.js 文件。
在 index.js 中，我们使用了上述四个 alias，分别引用了 react、vue、jquery 和 App 组件。通过 webpack 打包后，可以在浏览器中看到输出结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cd462ae46428fe9e6bf1e7
