Dependency Management

Dynamic expressions in import() or require()

요청에 표현식이 포함된 경우 컨텍스트가 생성되므로, 컴파일 시간에 정확한 모듈을 알 수 없습니다.

예를 들어, .ejs 파일을 포함하는 다음과 같은 폴더 구조가 있습니다.

example_directory
│
└───template
│   │   table.ejs
│   │   table-row.ejs
│   │
│   └───directory
│       │   another.ejs

import() 또는 require() 호출이 평가될 때:

import(`./template/${name}.ejs`);
require(`./template/${name}.ejs`);

Webpack은 import() 또는 require() 호출을 분석하여 몇 가지 정보를 추출합니다.

Directory: ./template
Regular expression: /^.*\.ejs$/

컨텍스트 모듈

컨텍스트 모듈이 생성됩니다. 정규 표현식과 일치하는 요청에 필요할 수 있는 해당 디렉터리의 모든 모듈에 대한 참조를 포함합니다. 컨텍스트 모듈은 요청을 모듈 id로 변환하는 맵을 포함합니다.

맵 예제:

{
  "./table.ejs": 42,
  "./table-row.ejs": 43,
  "./directory/another.ejs": 44
}

컨텍스트 모듈은 또한 맵에 접근하기 위한 런타임 로직도 포함합니다.

이는 동적 호출이 지원되지만, 일치하는 모든 모듈이 번들에 포함된다는 것을 의미합니다.

import.meta.webpackContext

The ESM equivalent of require.context is import.meta.webpackContext.

import.meta.webpackContext(directory, {
  recursive: true,
  regExp: /^\.\/.*$/,
  mode: "sync",
});

require.context

require.context() 함수로 자신만의 컨텍스트를 만들 수 있습니다.

검색할 디렉터리, 하위 디렉터리를 검색해야 하는지 여부를 나타내는 플래그, 일치하는 파일의 정규식을 전달할 수 있습니다.

Webpack은 빌드 하는 동안 코드에서 require.context()를 구문 분석합니다.

구문은 다음과 같습니다.

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = "sync"),
);

예:

require.context("./test", false, /\.test\.js$/);
// test 디렉터리에서 요청이 `.test.js`로 끝나는 파일이 있는 컨텍스트입니다.

require.context("../", true, /\.stories\.js$/);
// 상위 폴더와 그 하위 폴더에서 `.stories.js`로 끝나는 파일이 있는 컨텍스트입니다.

context module API

컨텍스트 모듈은 하나의 인수(요청)를 가지는 함수를 export 합니다.

export된 함수는 resolve, keys, id 3가지 속성을 가집니다.

resolve는 파싱된 요청의 모듈 id를 반환하는 함수입니다.
keys는 컨텍스트 모듈이 처리할 수 있는 가능한 모든 요청의 배열을 반환하는 함수입니다.

이것은 디렉터리의 모든 파일을 요청하거나 패턴과 일치시키려는 경우에 유용할 수 있습니다. 예제는 다음과 같습니다.

function importAll(r) {
  r.keys().forEach(r);
}

importAll(
  import.meta.webpackContext("../components/", {
    recursive: true,
    regExp: /\.js$/,
  }),
);

const cache = {};

function importAll(r) {
  for (const key of r.keys()) cache[key] = r(key);
}

importAll(
  import.meta.webpackContext("../components/", {
    recursive: true,
    regExp: /\.js$/,
  }),
);
// 빌드 시 캐시에는 필요한 모든 모듈이 채워집니다.

id는 컨텍스트 모듈의 모듈 ID입니다. 이는 import.meta.webpackHot.accept 또는 module.hot.accept에 유용할 수 있습니다.

Edit this page·Print this page

« Previous

Development - Vagrant

Installation

5 Contributors

Translators

choilim