webpack设置alias有坑
1、 设置别名alias
webpack中配置如下
需要注意的是后缀增加$代表指定文件
const path = require('path'); module.exports = { //... resolve: { alias: { @pages: path.resolve(__dirname, 'src/pages'), @components: path.resolve(__dirname, 'src/components'), @utils$: path.resolve(__dirname, 'src/utils/index.ts'), }, }, };
2、tsconfig配置如下
需要注意配置别名文件夹时需要名称和路径都需要添加/*才能生效,编译才不会报错
并且需要配置include,exclude
{ "compilerOptions": { ... "baseUrl": ".", "paths": { "@class/*": ["./src/entries/index/class/*"], "@pages/*": ["./src/entries/index/pages/*"], "@utils": ["src/utils/index.ts"] }, }, "include":["src"], "exclude": ["node_modules"], }