Webpack - 웹팩 Module Resolution (8)

지난 포스트에 이어서 웹팩의 Module Resolution에 대해서 알아보도록 하겠습니다.

Module Resolution

리졸버(resolver)는 절대 경로로 모듈을 찾는데 도움을 주는 라이브러리입니다. 모듈은 다음과 같이 다른 모듈의 종속성으로 필요할 수 있습니다.

import foo from 'path/to/module';
// or
require('path/to/module');

종속성 모듈은 애플리케이션 코드 또는 타사 라이브러리에서 가져올 수 있습니다. Resolver는 웹팩이 이러한 모든 require/import 문에 대해 번들에 포함되어야하는 모듈 코드를 찾는데 도움이 됩니다. 웹팩은 모듈을 번들링하는 동안 파일 경로를 해결하기 위해 enhanced-resolve를 사용합니다.

웹팩에서의 경로 설정 규칙 (Resolving rules in webpack)

enhanced-resolve를 사용하여 웹팩은 세 가지 종류의 파일 경로를 확인할 수 있습니다.

절대 경로 (Absolute paths)

import '/home/me/file';

import 'C:\Users\me\file';

이미 파일에 대한 절대 경로가 있으므로 추가 해결이 필요하지 않습니다.

상대 경로 (Relative paths)

import '../src/file1';
import './file2';

이 경우 import 또는 require가 발생하는 리소스 파일의 디렉터리가 컨텍스트 디렉터리로 간주됩니다. import / require에 지정된 상대 경로는 이 컨텍스트 경로에 결합되어 모듈에 대한 절대 경로를 생성합니다.

컨텍스트: 컨텍스트(Context)의 사전적 의미는 ‘문맥’이다. 어떤 문장의 ‘전후 관계’를 컨텍스트라고 하는 것이다

모듈 경로 (Module Paths)

import 'module';
import 'module/lib/file';

resolve.modules에 지정된 모든 디렉토리 내에서 모듈을 검색합니다. resolve.alias 구성 옵션을 사용하여 별칭을 만들어 원래 모듈 경로를 대체 경로로 바꿀 수 있습니다.

위의 규칙에 따라 경로가 확인되면 확인자는 경로가 파일 또는 디렉터리를 가리키는지 확인합니다. 경로가 파일을 가리키는 경우 경로에 파일 확장자가 있으면 파일이 바로 번들로 제공됩니다. 그렇지 않으면 파일 확장자는 resolve.extensions 옵션을 사용하여 해결됩니다. (.js, .jsx)

경로가 폴더를 가리키는 경우, 올바른 확장자를 가진 올바른 파일을 찾기 위해 다음 단계를 수행합니다. 폴더에 package.json 파일이 포함된 경우 resolve.mainFields 구성 옵션에 지정된 필드가 순서대로 조화되고 package.json의 첫 번째 필드가 파일 경로를 결정합니다. package.json이 없거나 resolve.mainFields가 유효한 경로를 반환하지 않는 경우, resolve.mainFiles 구성 옵션에 지정된 파일 이름을 순서대로 검색하여 import/require 디렉토리에 일치하는 파일 이름이 있는지 확인합니다. 그런 다음, 파일 확장자는 resolve.extensions 옵션을 사용하여 비슷한 방식으로 확인됩니다.

웹팩은 빌드 대상에 따라 이러한 옵션에 대해 합리적인 기본값을 제공합니다.

Resolving Loaders

이는 파일 해상도를 위해 지정된 규칙과 동일한 규칙을 따릅니다. 그러나 resolveLoader 구성 옵션을 사용하여 로더에 대한 별도의 해상도 규칙을 가질 수 있습니다.

캐싱 (Caching)

모든 파일 시스템 액세스가 캐시되므로 동일한 파일에 대한 여러 병령 또는 직렬 요청이 더 빠르게 발생합니다. 감시 모드에서는 수정된 파일만 캐시에서 제거됩니다. 감시모드가 꺼저 있으면 모든 컴파일 전에 캐시가 제거됩니다.

위에서 언급한 구성 옵션에 대한 자세한 내용은 Resolve API를 참조하세요.