javascript import 키워드로 모듈을 가져올때 일반적으로는 아래와 같이 상대 경로를 통해 해당 모듈을 가져오게 된다.
1
import child from './store/child';
하지만 만약 이를 절대 경로를 하고자 한다면 어떻게 해야할까? 바로 웹팩에 resolve object에 alias 설정을 해주면 된다. 실습을 위해 util 디렉토리 생성 후 util 클래스를 하나 만들어준다.
그리고 webpack.config.js 파일에 아래와 같은 설정을 추가해준다.
- webpack.config.js
1
2
3
4
5
6
7
8
9
module.exports = (env = {}) => {
...
resolve: {
alias: {
Util: path.resolve(__dirname, 'src/util'),
},
extensions: [".js", ".jsx", ".ts", ".tsx"], // 배열안 확장자에 따라서 처리
},
}
그리고 typescript가 적용된 경우 compilerOptions에 다음과 같이 추가한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
{
"compilerOptions": {
...
"baseUrl": "./",
"paths": {
"Util/*": ["src/util/*"]
}
},
"include": [
"./src"
]
}
그러면 실제 컴포넌트에서 다음과 같이 절대 경로를 통해 모듈을 import 해올 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
...
import util from "Util/util";
interface Props {
}
const styles = {
padding: "50px"
};
const App: React.FC<Props> = observer((props) => {
...
return (
<div style={styles}>
<div className={s.text}>person name: {person.name}</div>
<div>util value is {util.value}</div>
...
</div>
);
});
export default App;
실행하면 다음과 같이 정상적으로 모듈을 가져와 브라우저에 출력하는 것을 확인할 수 있다.
출처
- https://webpack.kr/configuration/resolve/
- https://webpack.kr/concepts/module-resolution
- https://webpack.kr/configuration/resolve/#resolvemodules
- https://jonghyun-park.medium.com/webpack-typescript%EC%97%90%EC%84%9C-path-alias-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-ec32428622d2
- https://im-developer.tistory.com/186
- https://suk9.tistory.com/53
- https://zereight.tistory.com/1051