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