Webpack 通过 resolve.alias 配置路径别名，提升 import 可读性与重构便利性；在 webpack.config.js 的 resolve.alias 中用 path.resolve() 设置 @ 指向 src 目录。
Webpack 通过 resolve.alias 配置路径别名，让 import 语句更简洁、可读性更强，也便于项目重构时统一调整路径。
在 webpack.config.js 中设置 alias
在 Webpack 配置的 resolve 选项中添加 alias 对象，键是别名（如 @），值是对应的实际绝对路径：
- 推荐用
path.resolve()拼接，确保路径准确（尤其跨平台） - 常用别名：
@指向src目录，指向 <code>src/components - 别名末尾加
/可避免意外匹配（例如@/不会误匹配@utils）
示例配置：
const path = require('path');
module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@components': path.resolve(__dirname, 'src/components'),
'@utils': path.resolve(__dirname, 'src/utils')
}
}
};
配合 TypeScript 使用需同步配置 tsconfig.json
如果项目用 TypeScript，仅配 Webpack 不够——TS 编译器不认识别名，会报模块找不到错误。必须在 tsconfig.json 中补充 baseUrl 和 paths：
立即学习“Java免费学习笔记（深入）”；
-
baseUrl设为"."（项目根目录），作为路径解析基准 -
paths写法要和 Webpackalias保持一致（支持通配符*） - VS Code 会自动识别该配置，提供正确的跳转和提示
示例 tsconfig.json 片段：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"],
"@utils/*": ["src/utils/*"]
}
}
}
常见问题与注意事项
-
别名不生效？检查是否漏写
resolve.alias或路径拼错；确认是否在正确配置文件中（如webpack.common.js而非只在.dev.js） -
ESLint 报路径错误？安装
eslint-import-resolver-webpack，并在.eslintrc.js中配置 resolver -
别名冲突？避免使用 Node.js 内置模块名（如
fs、path）或已安装包名作别名 -
动态导入不支持别名？Webpack 支持（如
import(`@/pages/${name}.vue`)），但需确保路径能被静态分析或配合require.context
小技巧：用插件自动提取别名
大型项目别名多，手动维护易出错。可用 webpack-alias-plugin 或自定义脚本从 jsconfig.json / tsconfig.json 自动同步别名，减少重复配置。
