webpack4.x打包文件解析

眼睛里的东西，是被赋予的，逃脱，就分不清‘真相’与‘现实’。–极简

一、环境

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

二、源码
src/index.js

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

三、配置文件
webpack.config.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?`);
     })
 }

然后，在立即执行函数中声明了__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__);实现代码调用。