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__);實現代碼調用。