[Webpack5 + typescript] resolve alias 절대경로 설정하기

 프로젝트를 하면서 폴더 구조를 전부 변경했다.

이런식으로 그냥 src안에 있었던 폴더들을 components 폴더를 만든 후 넣어줬다.

그리고 각 컴포넌트 폴더 안에 컴포넌트.tsx 파일과 index.ts 파일을 만들어 내보내주도록 만들었다.

 

이 과정을 하면서 원래 상대경로로 잡혀있던걸 절대경로로 바꿔주는 작업을 시도했다.

나는 webpack과 typescript를 사용했기 때문에 webpack.config.js 파일과 tsconfig.json 파일을 변경해야했다.

 

webpack.config.js

module.exports = {
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
    extensions: [".ts", ".tsx", ".js", ".jsx", ".css"],
  },
  ...
}

resolve는 모듈 해석에 대한 설정으로 특정 모듈을 호출할 때 모듈을 찾는 위치를 변경할 수 있다.

위 코드와 같이 쓴다면 src를 기점으로 모듈을 찾고 "@"로 치환해 import 할 수 있다.

또한, extensions 옵션을 사용해 확장자를 선언하면 import 할 때 확장자를 생략할 수 있다.

 

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "allowUmdGlobalAccess": true,
    "noEmit": false,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react",
    "declaration": true,
    "incremental": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["./src/**/*.ts", "./src/**/*.tsx", "@types"],
  "exclude": ["node_modules"]
}

나는 이런식으로 설정했다. 

baseUrl은 최상단 경로를 의미하며 paths에 절대경로 "@"와 하위 파일이라는 "/*"를 명시해준 후 매칭 시킬 주소를 배열안에 써주면 된다. 그리고 include를 통해 선택할 디렉토리를 포함시켜주면 된다.

 

import { Text } from "@/components/Text";

그러면 위와 같이 파일을 import 시킬 수 있게 된다 😊