tsconfig.json & webpack.config.ts

 

보통 import 시 경로를 지정할 때 '../../../'를 사용하지않고 설정파일에서 '@/'로 alias를 줘서 간단히 표현할 수 있다.

Typescript를 함께 사용하는 경우 아래 파일에서 각각 설정해줘야 제대로 돌아간다.

 

 

📄 tsconfig.json

타입스크립트 검사기(문법 검사)는 이 파일을 참조

{
  "compilerOptions": {
    "paths": {
      "@hooks/*": ["hooks/*"],
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"],
      "@pages/*": ["pages/*"],
      "@utils/*": ["utils/*"],
      "@typings/*": ["typings/*"]
    }
  }
}

 

📄 webpack.config.ts

자바스크립트로 바꿔주는 webpack은 이 파일을 참조

const config: webpack.Configuration = {
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
    alias: {
      '@hooks': path.resolve(__dirname, 'hooks'),
      '@components': path.resolve(__dirname, 'components'),
      '@layouts': path.resolve(__dirname, 'layouts'),
      '@pages': path.resolve(__dirname, 'pages'),
      '@utils': path.resolve(__dirname, 'utils'),
      '@typings': path.resolve(__dirname, 'typings'),
    },
  }
}