webpack 4.xパッケージファイル解析

目の中のものは与えられたもので、逃げたら、『真実』と『現実』が区別できない.きわめて簡単である
一、環境

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

二、ソースコードsrc/index.js

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

三、配置ファイルwebpack.co.nfig.js

const path = require('path');

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

四、包装後のコード(除去'*'号)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?`);
     })
 });

五、パッケージ後のコードの保存と実行は、本明細書で設定したwebpack構成を用いて、index.jsのコードは文字列として記憶され、evalの方式で本当に実行されることが分かる.
六、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?`);
     })
 }

そして、即時実行関数において、_u u u u u u u uを宣言した.webpack_リキュール関数として、アウウを追加しました.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_リキュールの呼び出しを行います
最後に、グウwebpack_リキュールコードコールは、modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);を介して方法で実現される.