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"],
}