tsconfig, jsconfig 절대 경로와 webpack alias 설정 관련 해결 방법

tsconfig나 jsconfig 설정을 통해서 단축 경로 사용 하기

모듈을 import하는 경우에 tsconfig나 jsconfig를 통해서 단축 경로 사용이 가능하다.

 

예를 들어 

import A from "../../base/A"

jsconfig, tsconfig에서 

"compilerOptions" : {
	"baseUrl": "./base"
}

baseUrl를 설정해주면 기본 경로가 base에서 시작 된다.

import A from "./A"

이런식으로 사용이 가능하다.

 

또 다른 방법으로는 

"compilerOptions" : {
	"paths": {                                
		"@A": ["base/A"],
	}
}

import A from "@A"

이렇게 "paths" 옵션을 사용하는 것도 가능 하다.

 

위처럼 설정하는 경우 vscode 같은 ide나 lint 같은 해당 모듈을 찾아서 동작이 가능하지만

실제로 webpack을 사용하여 build하는 경우에는 추가로 webpack config를 설정해줘야 동일한 경로를 찾을수 있다.

 

webpack alias 설정을 이용하거나

 

https://www.npmjs.com/package/tsconfig-paths-webpack-plugin

tsconfig-paths-webpack-plugin

위 웹팩 플러그인을 사용하면 된다.

 

// webpack.config.js 

const path = require("path") 
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin') 
const tsConfigPath = path.resolve(__dirname, "./tsconfig.json") 

... 

resolve: { extensions: ['.ts', '.tsx', '.js'], 
	plugins: [new TsconfigPathsPlugin({ configFile: tsConfigPath })] },