티스토리 뷰
웹팩의 컴파일러는 엔트리부터 시작해서 모든 모듈을 재귀적으로 파싱하면서 require(), require.context(), import(), import 구문을 해석하여 의존성 그래프를 만든다. 보통 웹팩에서 context는 "모듈의 경로를 해석하기 위한 기준이 되는 base 디렉토리"를 의미한다. 예를들어, 현재 working directory가 default context로 사용된다면 require.resolve('../../../foo.js')요청에 대한 컨텍스트는 __dirname이 된다.
웹팩이 어떤 디렉토리를 기준으로 모듈들의 경로를 찾게 할것인지 결정하는것이다.
require.context는 기준 디렉토리로부터 정규표현식에 해당하는 모든 모듈을 불러올 수 있는 웹팩 컴파일러의 특별한 기능이다. require.context를 사용하면 컴파일타임에 매칭되는 모든 모듈을 웹팩 빌드 디펜던시에 추가하게 되고 덕분에 매칭되는 모든 모듈을 런타임에 불러올 수 있게 되는것이다.
require.context를 아마 다음과 같은 상황에 사용하게 될것이다.
glob패턴을 사용해서 require하고 싶은 모든 모듈들의 경로를 동적으로 빌드하고 싶을때 사용한다. require.context는 require과 비슷하게 동작하는 callable object를 리턴한다. 이 객체는 매칭된 모듈에 대한 정보를 담고 있다.
출처
https://stackoverflow.com/questions/54059179/what-is-require-context
'Webpack' 카테고리의 다른 글
node_module안에 들어있는 css를 가져오지 못하는 현상 (0) | 2020.06.04 |
---|---|
빌드타임, 런타임 코드 스플리팅 (0) | 2020.04.17 |
웹팩 entry와 output (0) | 2020.04.16 |
바벨 (0) | 2019.10.02 |
Yarn.lock 이란? (0) | 2019.10.01 |
- Total
- Today
- Yesterday
- Polyfill
- useRef
- type alias
- atomic design
- promise
- await
- Action
- async
- hydrate
- useEffect
- return type
- Babel
- webpack
- reactdom
- reflow
- design system
- storybook
- javascript
- state
- computed
- rendering scope
- mobx
- Next.js
- react
- props
- typescript
- reducer
- server side rendering
- react hooks
- es6
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |