webpack 의 __webpack_require__ 함수

• __webpack_require__.f 를 사용하여, 청크 로드 후 후처리하는 코드를 추가할 수 있다.

• 즉 해당 함수는 웹팩의 동적 로딩 시스템의 핵심 부분이며, 코드스플릿팅, module federation 을 가능하게 하는 확장 가능한 메커니즘을 제공한다.

• 예를들어 동적로딩을 처리한다고하면 아래와 같은 동작과정을 거친다.

// 애플리케이션 코드
import('./dynamicModule').then(module => {
  // 동적으로 로드된 모듈 사용
});

// Webpack이 생성한 런타임 코드 (간소화된 버전)
var __webpack_modules__ = {};
var __webpack_module_cache__ = {};

function __webpack_require__(moduleId) {
  // 모듈 로딩 로직
}

__webpack_require__.e = function(chunkId) {
  var promises = [];
  Object.keys(__webpack_require__.f).forEach(function(key) {
    __webpack_require__.f[key](chunkId, promises);
  });
  return Promise.all(promises);
};

__webpack_require__.f = {
  j: function(chunkId, promises) {
    // JSONP 청크 로딩
    var script = document.createElement('script');
    script.src = chunkId + ".bundle.js";
    document.head.appendChild(script);
    promises.push(new Promise((resolve, reject) => {
      script.onload = resolve;
      script.onerror = reject;
    }));
  }
};

// Webpack이 동적 import를 다음과 같이 변환
__webpack_require__.e("dynamicModule").then(function() {
  return __webpack_require__("./dynamicModule.js");
}).then(module => {
  // 동적으로 로드된 모듈 사용
});

1. 동적 import 호출
   • 개발자가 동적 import 를 호출한다.
2. 웹팩 변환
   • 웹팩은 빌드 시 이 코드를 __webpack_require__.e("dynamicModule") 로 변환한다.
3. __webpack_require__.e 실행
   • 해당 함수가 호출되며, 청크 id (dynamicModule)을 인자로 받는다.
4. 로더 함수 실행
   • __webpack_require__.e 내부에서 __webpack_require__.f의 모든 속성(로더 함수)을 순회한다.
   • 각 로더함수 (__wepbakc_requrie_.f.j) 가 호출되며, 청크 ID 와 프라미스 배열을 인자로 받는다.
5. 청크 로딩
   • 로딩 완료에 대한 Promise 를 프라미스 배열에 추가한다.
6. 프라미스 resolve
   • return Promise.all(promises); 를 반환한다.
   • 모든 필요한 청크가 로드 될 때 까지 기다린다.
7. 모듈 require
   • 청크 로딩이 완료되면 웹팩은 __webpack_require__("./dynamicModule.js") 를 호출한다.
   • 이는 실제 모듈 코드를 실행하고 내보낸(Expored)값을 반환한다.
8. 사용자 코드 실행
   • 개발자가 작성한 then 콜백이 실행되며, 로드된 모듈을 인자로 받는다.