[webpack] resolve alias 절대경로 설정 ( javascript / typescript )

오늘은 webpack의 절대경로 설정에 대해서 알아보겠습니다. 절대경로 설정이 자바스크립트와 타입스크립트가 조금 다르게 설정 해야됩니다. 타입스크립트에서 설정할게 더 있다고 볼 수 있습니다. 간단한 설명과 함께 진행해보겠습니다.

 

자바스크립트

우리는 절대경로를 사용하기 위하여 webpack의 resolve옵션을 사용하게 될 것입니다. resolve는 모듈해석에 대한 설정으로 특정 모듈을 호출할 때 모듈을 찾는 위치를 변경할 수 있습니다.

//webpack.config.js
module.exports = {
	resolve: {
		alias: {
			"@": path.resolve(__dirname, "./src/"),
		},
	}
};

위와 같이 한다면 src를 기점으로 모듈을 찾고 모듈을 찾을때는 아래와 같이 찾습니다. 위와 같이 해놓으면 src 하위의 경로는 @로 치환하여 깔끔하게 import 할 수 있게 됩니다.

import AA from "@/components/AA.js"

그 후, 조금 더 깔끔한 경로를 만들기 위하여 우리는 확장자를 제거해보도록 하겠습니다. 우리는 이때 extensions이라는 옵션을 사용할 수 있습니다. 이 옵션 내에 확장자를 선언하면 확장자를 생략할 수 있습니다.

//webpack.config.js
module.exports = {
	resolve: {
		alias: {
			"@": path.resolve(__dirname, "./src/"),
		},
        extensions:[".js",".jsx",".css"]
	}
};

이름이 같지만 다른 확장자를 가진 경우에는 웹팩은 js부터 해석하고 나머지는 해석하지 않습니다. 즉 동일파일로 되있으면 확장자 미표기시 js가 import(위의 코드에서는) 됩니다. 이것을 유의해서 작성해주세요.

import AA from "@/components/AA"

 

타입스크립트

타입스크립트의 경우 한가지 설정을 추가로 해주어야 됩니다. 웹팩 설정 뿐만아니라 tsconfig 타입스크립트 설정파일 또한 변경해주어야 합니다. 우선 타입스크립트가 설치되어있다는 가정하에 설정파일을 초기화 해보겠습니다.

tsc --init

해당 구문이 오류가 난다면 typescript가 글로벌로 설치되어 있지 않다는 것을 의미하니 참고해주시면 되겠습니다. 만약 글로벌 설치가 안되있다면 파일을 직접생성해도 무방합니다.

//tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es5",
    "module": "esnext",
    "jsx": "react-jsx",
    "noImplicitAny": true,
    "allowSyntheticDefaultImports": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}

tsconfig.json파일이라는 파일을 생성하고 내부에 아래와 같이 작성합니다. baseUrl은 최상단 경로를 의미하고 paths에 절대 경로 @와 그 아래 파일이라는 /*를 명시해주고 그것과 매칭되는 주소를 배열안에 위와 같이 명시해줍니다. 그리고 include를 통해 src디렉토리를 포함시켜 줍니다.

 

이제 타입스크립트 파일도 절대경로로 언제든지 사용할 수 있으실 겁니다. 타입스크립트의 경우 웹팩과 타입스크립트 설정 모두 하셔야 되는것을 잊지 말아주시면 좋겠습니다.