Webpack을 사용하여 모듈을 로드하는 방법

이 글은 주로 Webpack이 모듈을 로드하는 방법을 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

Webpack은 프런트 엔드 개발에서 모듈 패키징 도구로 개발자들 사이에서 매우 인기가 있으며, 풍부한 로더를 통해 다양한 기능을 구현할 수 있습니다. 이 기사에서는 webpack을 사용하여 js 파일을 패키징하고 webpack이 각 모듈을 로드하는 방법을 살펴보겠습니다.

두 개의 간단한 소스 파일

웹팩 로딩 모듈의 원리 분석을 용이하게 하기 위해 두 개의 파일을 준비했습니다:

hello.js

const hello = {
 say: arg => {
  console.info('hello ' + arg || 'world');
 }
};

export default hello;

index.js

import Hello from './hello';

Hello.say('man');

index.js는 항목 파일 역할을 하며 hello.js 모듈을 참조합니다.

Webpack 패키징

명령줄에서 webpack index.js Bundle.js를 실행하여 항목 파일을 패키징하고 Bundle.js를 생성합니다. 일반적인 구조는 (읽기의 편의를 위해 일부 중복을 삭제했습니다.) code):

최종 생성된 파일이 (function (modules) {})([module 1, module 2]) 형태로 시작되는 것을 볼 수 있습니다. 우리가 정의한 모듈은 익명 함수로 패키징됩니다. , 그리고 익명 함수 함수(모듈) {}를 배열 형태로 전달합니다. 이 익명 함수에서는 모듈을 로드하기 위해 __webpack_require__() 함수가 정의됩니다. 마지막으로 모듈은 return __webpack_require__(__webpack_require__.s)에 의해 로드됩니다. = 0); 모듈 index.js

__webpack_require__() 함수

이 함수는 moduleId를 매개변수로 받습니다. 이는 배열에 있는 각 모듈의 인덱스입니다.

function __webpack_require__(moduleId) {
  /******/
  /******/ // Check if module is in cache
  /******/
  if (installedModules[moduleId]) {
   /******/
   return installedModules[moduleId].exports;
   /******/
  }
  /******/ // Create a new module (and put it into the cache)
  /******/
  var module = installedModules[moduleId] = {
   /******/
   i: moduleId,
   /******/
   l: false,
   /******/
   exports: {}
   /******/
  };
  /******/
  /******/ // Execute the module function
  /******/
  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  /******/
  /******/ // Flag the module as loaded
  /******/
  module.l = true;
  /******/
  /******/ // Return the exports of the module
  /******/
  return module.exports;
  /******/
 }

여기서 installModules는 캐시 실행 모듈을 사용합니다. module[moduleId].call()을 통해 모듈을 실행하고, 마지막으로 모듈의 내보내기를 반환합니다.

모듈에서 허용하는 매개변수

hello.js 모듈을 예로 들어보세요

 (function (module, __webpack_exports__, __webpack_require__) {

  "use strict";
  const hello = {
   say: arg => {
    console.info('hello ' + arg || 'world');
   }
  };

  /* harmony default export */
  __webpack_exports__["a"] = (hello);

  /***/
 })

webpack은 다른 모듈을 가져오기 위해 모듈에 대한 module, __webpack_exports__, __webpack_require__ 三个参数，前两个是用来导出模块内的变量，第三个参数为前面介绍的 __webpack_require__() 참조를 전달합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

webpack4를 기반으로 반응 프로젝트 프레임워크를 구축하는 방법

React에서 구성 요소를 만드는 세 가지 방법과 차이점

위 내용은 Webpack을 사용하여 모듈을 로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!