Skip to content

Kyunghwa Yoo

Webpack Resolve

— Webpack, javascript — 1 min read

  • Webpack의 모듈 번들링 관점에서 봤을 때, 모듈 간의 의존성을 고려하여 모듈을 로딩해야 한다.
  • 따라서, 모듈을 어떤 위치에서 어떻게 로딩할지에 관해 정의를 하는 것이 바로 Module Resolution
1// 일반적인 모듈 로딩 방식
2import foo from 'path/to/module'
3// 또는
4require('path/to/module');
  • 그렇다면 여기서 우리가 주목해야 할 부분은 바로 '모듈을 어떻게 로딩해오느냐?' 라는 점
    • 절대 경로를 이용한 파일 로딩
      • 파일의 경로를 모두 입력해준다.
    • 상대경로를 이용한 파일 로딩
      • 해당 모듈이 로딩되는 시점의 위치에 기반하여, 상대 경로를 절대 경로로 인식하여 로딩한다.
1// 절대 경로
2import '/home/me/file';
3import 'C:\\Users\\me\\file'
4
5// 상대 경로
6import '../src/file1';
7import './file2';

Resolve Option

  • config 파일에 resolve를 추가하여 모듈 로딩에 관련된 옵션 사용
  • alias
    • 특정 모듈을 로딩할 때 alias 옵션을 이용하면 별칭으로 더 쉽게 로딩이 가능하다.
1alias: {
2    Utilities: path.resolve(__dirname, 'src/path/utilities/')
3}
4
5import Utility from '../../src/path/utilities/utility';
6
7// alias 사용시 '/src/path/utilities/' 대신 'Utilities' 활용
8import Utility from 'Utilities/utility';
  • modules
    • require() import '' 등의 모듈 로딩시에 어느 폴더를 기준할 것인지 정하는 옵션
1modules: ['node_modules'] // defaults
2modules: [path.resolve(__dirname, 'src'), 'node_modules'] // src/node_modules
© 2025 by Kyunghwa Yoo.