使用了好久的umi 最近一个项目回归了使用create-react-app,创建项目需要配置webpack alias。 查了下文档不太清晰,搜的大部分都是直接在webpack.config.js 改的。设计留了入口,所以还是写一下分享。
发现调用了 modules.webpackAliases
,然后追踪modules模块。
/**
* Get webpack aliases based on the baseUrl of a compilerOptions object.
*
* @param {*} options
*/
function getWebpackAliases(options = {}) {
const baseUrl = options.baseUrl;
if (!baseUrl) {
return {};
}
const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
if (path.relative(paths.appPath, baseUrlResolved) === '') {
return {
src: paths.appSrc,
};
}
}
从这个函数可以看出主要依赖两个变量觉得 alias,一个是
paths.appPath
另一个options.baseUrl
,第一个就是app 的路径,分析下options 即可。
得出结论,是靠tsconfig compilerOptions 的 baseURL
参数控制。
"baseUrl": "./",
"paths": { "@/*": ["src/*"], "~/*": ["../*"] },
这样设置 src
和 @
可以对应src 文件夹。
还可以配置单独的,比如设置pages 文件夹 alias
"baseUrl": "./src",
"paths": {
"pages/*":["pages/*"]
},