webpack4. x 포장 파일 분석

눈 속 의 것 은 부 여 된 것 이 고, 도망 가면 '진실' 과 '현실' 을 분간 할 수 없다.미니 멀 하 다
환경

"webpack": "^4.43.0"
"webpack-cli": "^3.3.11"

2. 소스 코드 src / index. js

export default function() {
    console.log('hello world')
}

3. 프로필 webpack. config. js

const path = require('path');

module.exports = {
    mode: 'development', 
    entry: ['./src/index.js'],
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
};

4. 포 장 된 코드 ('*' 번 제거) dist / main. js

 (function(modules) { // webpackBootstrap
     // The module cache
     var installedModules = {};

     // The require function
     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;
     }


     // expose the modules object (__webpack_modules__)
     __webpack_require__.m = modules;

     // expose the module cache
     __webpack_require__.c = installedModules;

     // define getter function for harmony exports
     __webpack_require__.d = function(exports, name, getter) {
         if (!__webpack_require__.o(exports, name)) {
             Object.defineProperty(exports, name, { enumerable: true, get: getter });
         }
     };

     // define __esModule on exports
     __webpack_require__.r = function(exports) {
         if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
             Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
         }
         Object.defineProperty(exports, '__esModule', { value: true });
     };

     // create a fake namespace object
     // mode & 1: value is a module id, require it
     // mode & 2: merge all properties of value into the ns
     // mode & 4: return value when already ns object
     // mode & 8|1: behave like require
     __webpack_require__.t = function(value, mode) {
         if (mode & 1) value = __webpack_require__(value);
         if (mode & 8) return value;
         if ((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
         var ns = Object.create(null);
         __webpack_require__.r(ns);
         Object.defineProperty(ns, 'default', { enumerable: true, value: value });
         if (mode & 2 && typeof value != 'string')
             for (var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
         return ns;
     };

     // getDefaultExport function for compatibility with non-harmony modules
     __webpack_require__.n = function(module) {
         var getter = module && module.__esModule ?
             function getDefault() { return module['default']; } :
             function getModuleExports() { return module; };
         __webpack_require__.d(getter, 'a', getter);
         return getter;
     };

     // Object.prototype.hasOwnProperty.call
     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

     // __webpack_public_path__
     __webpack_require__.p = "";


     // Load entry module and return exports
     return __webpack_require__(__webpack_require__.s = "./src/index.js");
 })
 ({
     "./src/index.js":
     /*! exports provided: default */
         (function(module, __webpack_exports__, __webpack_require__) {
         "use strict";
         eval(`
         __webpack_require__.r(__webpack_exports__);
         /* harmony default export */
         __webpack_exports__[\"default\"] = (function(){
            console.log('hello world')
        });
        //# sourceURL=webpack:///./src/index.js?`);
     })
 });

5. 포장 후 코드 저장 과 실행 방식 은 본 고 에서 설정 한 웹 팩 설정 을 사용 한 상황 에서 index. js 의 코드 는 문자열 로 저장 되 고 eval 방식 으로 실 행 된 것 을 알 수 있 습 니 다.
6. index. js 코드 실행 과정 분석 먼저, 전체 포장 파일 은 즉시 실행 함수 이 며, index. js 파일 의 내용 은 키 값 대 방식 으로 이 함수 에 전 달 됩 니 다.키 가 파일 의 상대 경로 입 니 다.

{
     "./src/index.js":
     /*! exports provided: default */
         (function(module, __webpack_exports__, __webpack_require__) {
         "use strict";
         eval(`
         __webpack_require__.r(__webpack_exports__);
         /* harmony default export */
         __webpack_exports__[\"default\"] = (function(){
            console.log('hello world')
        });
        //# sourceURL=webpack:///./src/index.js?`);
     })
 }

그리고 즉시 실행 함수 에서webpack_require__함수, 그리고 그 에 게 를 증가 시 켰 습 니 다.webpack_require__.m、webpack_require.c、webpack_require.d、webpack_require.r、webpack_require.t、webpack_require.n、webpack_require.o、webpack_require.p、webpack_require. s 등 속성, 그리고 즉시 함수 반환webpack_require__호출
마지막 으로webpack_require__방법 중 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 을 통 해 코드 호출 을 실현 한다.