從 0 到 1 實現一款簡易版 Webpack

// 找到這裡的程式碼
// webpack 有兩種命令列工具: webpack-cli 和 webpack-command 
// 因為 webpack-cli 功能更強大，一般都是用 webpack-cli，所以會執行下面的語句
else if (installedClis.length === 1) {
    const path = require("path");
    const pkgPath = require.resolve(`${installedClis[0].package}/package.json`);
    const pkg = require(pkgPath);
    require(path.resolve(
        path.dirname(pkgPath),
        pkg.bin[installedClis[0].binName]
    ));
} 複製程式碼

// debugger.js 和專案中的 packge.json 同級
// 右鍵執行 debugger.js ，相當於使用 npx webpack 執行 webpack
// npx webpack 其實就是用 node 執行 bin 下面的 cli.js 
// npx webpack = node ./node_modules/webpack-cli/bin/cli.js
// 找到 webpack-cli/bin/cli.js ，設定斷點，就可以開始除錯了（這是第一種方法）
const path = require("path");
const pkgPath = require.resolve(`webpack-cli/package.json`);
const pkg = require(pkgPath);
require(path.resolve(
        path.dirname(pkgPath),
        './bin/cli.js'
        //pkg.bin['webpack-cli']
));複製程式碼

let webpack = require("webpack");
let webpackOptions = require("./webpack.config");
const compiler = webpack(webpackOptions);

compiler.run((err, stat) => {
  console.log(err);
  console.log(stat)
});複製程式碼

const path = require('path');
module.exports = {
    // 用開發模式打包程式碼 !!!!!!
    mode:'development',
    devtool:'none',
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
};複製程式碼

// src/index.js
import {logMsg}  from './sync-module';
console.log(logMsg);
let button = document.createElement('button');
button.innerHTML = '請點我';
button.addEventListener('click',()=>{
    import(/*webpackChunkName: 'async-module'*/'./async-module.js').then(result=>{
        console.log(result.default);
    });
});
document.body.appendChild(button);


// src/async-module.js
module.exports = "我是非同步模組";


// src/sync-module.js
export function logMsg() {
    console.log('我是同步模組');
}複製程式碼

/*
  src/
  index.js
  sync-module.js
  async-module.js
*/
// webpack 打包後，會把引用模組的相對路徑變成相對於 webpack.config.js 的相對路徑
// 在 index.js 中 引入 "./sync-module.js"  => 最終會變成 "./src/sync-module.js"

// webpack 啟動程式碼的自執行函式
(function(modules) { // webpackBootstrap

  // install a JSONP callback for chunk loading
  function webpackJsonpCallback(data) {
    // data => [
      // [chunkName],
      // { chunkID : chunk 內容}
    // ]
    var chunkIds = data[0];
    var moreModules = data[1];

    // add "moreModules" to the modules object,
    // then flag all "chunkIds" as loaded and fire callback
    var moduleId, chunkId, i = 0, resolves = [];
    for(;i < chunkIds.length; i++) {
      chunkId = chunkIds[i];
      if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
        // installedChunks[chunkId] => [resolve, reject, Promise]
        // 將 resolve 存到 resolves 陣列中，先不著急執行 resolve()
        resolves.push(installedChunks[chunkId][0]);
      }
      // 設定為 0 ，表示已經載入成功
      installedChunks[chunkId] = 0;
    }
    for(moduleId in moreModules) {
      if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
        // 非同步 chunk 載入完成後，將非同步 chunk 的程式碼合併到 modules 中
        // 這樣之後載入該 chunk 時，可以直接從 modules 中獲取到
        // key 是模組 ID ，value 是模組內容
        modules[moduleId] = moreModules[moduleId];
      }
    }
    if(parentJsonpFunction){
      parentJsonpFunction(data);
    }

    while(resolves.length) {
      // 執行 resolve
      resolves.shift()();
    }
  }


  // The module cache
  // 普通模組的快取：只要載入初始化過一次的模組都放到這，之後再使用這個模組時
  // 直接從這裡獲取，不需要再初始化一遍
  var installedModules = {};


  // object to store loaded and loading chunks
  // ！！！！！！！！！！！！！！！！！！！！！！
  // 儲存已載入的或者載入中的 chunk （這裡的 chunk 包含： 入口 chunk 和非同步載入的 chunk）
  // ！！！！！！！！！！！！！！！！！！！！！！
  // installedChunks 物件中，每個 key 對應的 value 值的意思
  // undefined = chunk not loaded, null = chunk preloaded/prefetched
  // undefined 表示 chunk 還未載入，null 表示 chunk 會預載入
  // Promise = chunk loading, 0 = chunk loaded
  // Promise 表示 chunk 正在載入中，0 表示 chunk 載入完成
  var installedChunks = {
    // 如果是單入口，key 的預設值是 main
    "main": 0
  };


  // script path function
  // 設定非同步 chunk 的請求 url
  function jsonpScriptSrc(chunkId) {
    return __webpack_require__.p + "" + chunkId + ".bundle.js"
  }

  // The require function
  // webpack 自己實現的一個 require 方法，可以直接在瀏覽器中執行
  function __webpack_require__(moduleId) {

    // Check if module is in cache
    // 載入模組前，先從快取列表中查詢，是否已經載入過
    if(installedModules[moduleId]) {
      // 如果有，說明模組已經快取過，直接返回該模組的匯出物件 exports
      return installedModules[moduleId].exports;
    }
    // Create a new module (and put it into the cache)
    // 建立一個新的模組物件，並且放到快取列表中
    var module = installedModules[moduleId] = {
      // 模組 ID
      i: moduleId,
      // 是否已經載入 loaded:false
      l: false,
      // 模組匯出物件，預設是一個空物件
      exports: {}
    };

    // Execute the module function
    // 載入模組
    // modules 是自執行函式接收的引數——一個包含模組資訊的物件
    // key 是模組路徑， value 是一個函式，裡面包含了模組的內容
    // {
    //  "./src/a.js":
    //  (function(module, __webpack_exports__, __webpack_require__) {
    //    模組內容：xxx
    //    模組內容：xxx
    //    模組內容：xxx
    //   },
    // }
    // 從 modules 物件中找到對應的 key，執行函式（value）並將內部的 this 指向上面新建 module 的 exports 物件
    // 目的是將函式內部的內容都放置到 module.exports 中
    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;
  }

  // This file contains only the entry chunk.
  // The chunk loading function for additional chunks
  // 載入非同步 chunk
  __webpack_require__.e = function requireEnsure(chunkId) {
    var promises = [];

    // JSONP chunk loading for javascript
    // 用 jsonp 來請求載入非同步 chunk
    var installedChunkData = installedChunks[chunkId];

    // 0 means "already installed".
    // 如果要載入的 chunk 沒有初始化過
    if(installedChunkData !== 0) {

      // a Promise means "currently loading".
      // 排除了 0，快取 chunk 列表裡的值就剩下 undefined/null/Promise
      // 當模組正在載入中時
      if(installedChunkData) {
        promises.push(installedChunkData[2]);
      }
      // 當模組還未載入過
      else {
        // setup Promise in chunk cache
        var promise = new Promise(function(resolve, reject) {
          // 新建一個 promise 時，會立即執行它的函式體
          // 將當前 chunk 的狀態設定為 Promise，表示正在載入中
          installedChunkData = installedChunks[chunkId] = [resolve, reject];
        });
        // 給當前的 installedChunkData 新增一個值
        // 然後將 installedChunkData 新增到 promises 陣列中
        promises.push(installedChunkData[2] = promise);

        // start chunk loading
        // 用 jsonp 來請求載入非同步 chunk
        var script = document.createElement('script');
        var onScriptComplete;

        script.charset = 'utf-8';
        script.timeout = 120;
        if (__webpack_require__.nc) {
          script.setAttribute("nonce", __webpack_require__.nc);
        }
        // 設定請求 url
        script.src = jsonpScriptSrc(chunkId);

        // create error before stack unwound to get useful stacktrace later
        var error = new Error();
        onScriptComplete = function (event) {
          // avoid mem leaks in IE.
          script.onerror = script.onload = null;
          clearTimeout(timeout);
          var chunk = installedChunks[chunkId];
          if(chunk !== 0) {
            if(chunk) {
              var errorType = event && (event.type === 'load' ? 'missing' : event.type);
              var realSrc = event && event.target && event.target.src;
              error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
              error.name = 'ChunkLoadError';
              error.type = errorType;
              error.request = realSrc;
              chunk[1](error);
            }
            installedChunks[chunkId] = undefined;
          }
        };
        var timeout = setTimeout(function(){
          onScriptComplete({ type: 'timeout', target: script });
        }, 120000);
        script.onerror = script.onload = onScriptComplete;
        document.head.appendChild(script);
      }
    }
    // 執行完所有的 promise後再返回結果
    return Promise.all(promises);
  };

  // expose the modules object (__webpack_modules__)
  // 將模組列表放到 __webpack_require__ 的 m 屬性上
  __webpack_require__.m = modules;

  // expose the module cache
  // 將快取列表放到 __webpack_require__ 的 c 屬性上
  __webpack_require__.c = installedModules;

  // define getter function for harmony exports
  // 在 exports 物件上定義 name 屬性的 getter 方法
  __webpack_require__.d = function(exports, name, getter) {
    // 判斷 exports 物件上是否有 name 屬性
    if(!__webpack_require__.o(exports, name)) {
      // 在 exports 物件上新增 name 屬性，可列舉為 true
      // get 的值為 getter,當訪問該屬性時，該方法會被執行
      Object.defineProperty(exports, name, { enumerable: true, get: getter });
    }
  };

  // define __esModule on exports
  // 在 exports 物件上定義一個 __esModule 屬性，用來判斷當前模組是否為 es6 模組
  __webpack_require__.r = function(exports) {
    // 如果當前瀏覽器支援 Symbol
    if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      // 設定前
      // console.log(exports.toString());// [object Object]
      // 給 exports 物件型別設定為 Module
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
      // 設定後
      // console.log(exports.toString());// [object Module]
    }
    // 否則給 exports 物件新增一個表示 esm 的屬性
    Object.defineProperty(exports, '__esModule', { value: true });
  };

  // create a fake namespace object  建立一個名稱空間物件
  / 為什麼要建立一個名稱空間物件？
  // 因為 import('xxx.js') 載入的 js，可能是 esm ，也可能是 cjs
  // 所以需要相容處理
  // mode & 1: value is a module id, require it 如果值是模組ID，載入它
  // mode & 2: merge all properties of value into the ns 把所有的屬性合併到名稱空間上 ns —— nameSpace
  // mode & 4: return value when already ns object  當已經是名稱空間物件的話直接返回值
  // mode & 8|1: behave like require 就像 require 一樣
  // mode 為什麼要用二進位制來判斷?  高效。節約記憶體
  // linux 裡面的許可權判斷也是用的二進位制， 7 => 111 可讀可寫可執行
  __webpack_require__.t = function(value, mode) {
    // value 最開始是模組 ID
    // 直接載入模組
    if(mode & 1) value = __webpack_require__(value);
    // 不用載入模組，直接返回模組內容
    if(mode & 8) return value;
    // 如果 value 已經是一個物件並且 __esModule 屬性為 true 的話就直接返回 value
    if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
    // 否則就建立一個空物件,載入這個物件,
    var ns = Object.create(null);
    // 在物件上設定 __esModule 屬性為true
    __webpack_require__.r(ns);
    // 給 ns 物件定義一個 default 屬性
    Object.defineProperty(ns, 'default', { enumerable: true, value: value });
    // 如果 mode 為2，並且 value 不是字串，把值的所有屬性都定義到 ns 物件上
    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;//{__esModule:true,default:'模組內容'}
  };

  // getDefaultExport function for compatibility with non-harmony modules
  // 一個能獲取模組內容的函式
  __webpack_require__.n = function(module) {
    // 如果是 __esModule,說明是 es6 模組，需要返回模組的 default 屬性
    // 如果不是，說明是 cjs 模組，直接返回模組本身
    var getter = module && module.__esModule ?
      function getDefault() { return module['default']; } :
      function getModuleExports() { return module; };
    //給 getter 新增一個 a 的屬性，就是 getter 方法本身
    __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 = "";

  // on error function for async loading
  // 載入非同步 chunk 時的錯誤輸出
  __webpack_require__.oe = function(err) { console.error(err); throw err; };


  // 第一次執行的時候，window["webpackJsonp"] 會是一個空陣列
  // jsonpArray 和 window["webpackJsonp"] 共同指向同一塊記憶體地址
  var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];

  // 繫結 this，將老的陣列的 push 方法始終指向 jsonpArray
  var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
  // 如果不繫結 this 的話，那麼在 webpackJsonpCallback 中執行 parentJsonpFunction(data) 的時候
  // 就相當於執行了一個 “裸的”陣列原生 的 push，data 不知道該新增給誰
  // var oldJsonpFunction = jsonpArray.push;

  //重寫 jsonArray 的 push 方法，賦值為 webpackJsonpCallback
  jsonpArray.push = webpackJsonpCallback;
  jsonpArray = jsonpArray.slice();
  for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
  // 為什麼要保留老的陣列的 push 方法？
  // 避免 "重複發請求" 載入 chunk ，如果已經載入好了的，就拿來直接用
  var parentJsonpFunction = oldJsonpFunction;

  // 總結：
  // 1、window["webpackJsonp"] 的 push 方法被重寫，不再是陣列原生的方法，而是用來執行 jsonp 回撥函式的
  // 2、這時候如果想要給 window["webpackJsonp"] 這個陣列新增資料時，就無法用 push 來新增了
  // 3、所以這裡多定義一個 jsonpArray 陣列，它和 window["webpackJsonp"] 共同指向同一塊記憶體地址
  // 4、通過給 jsonpArray 新增（push）資料，那麼相應的 window["webpackJsonp"] 就能獲取到這些資料

  // Load entry module and return exports
  // 載入入口模組並且返回匯出物件
  return __webpack_require__(__webpack_require__.s = "./src/index.js");
})
/************************************************************************/
/*
  src/
  index.js
  sync-module.js
  async-module.js
*/
// webpack 打包後，會把引用模組的相對路徑變成相對於 webpack.config.js 的相對路徑
// 在 index.js 中 引入 "./sync-module.js"  => 最終會變成 "./src/sync-module.js"

({
  // key 是模組 ID ，value 是模組內容
  "./src/index.js":
  /*!**********************!*\
    // 入口 chunk
      !*** ./src/index.js ***!
      \**********************/
  /*! no exports provided */
    (function(module, __webpack_exports__, __webpack_require__) {

      "use strict";
      __webpack_require__.r(__webpack_exports__);
      /* harmony import */ var _sync_module__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./sync-module */ "./src/sync-module.js");

      console.log(_sync_module__WEBPACK_IMPORTED_MODULE_0__["logMsg"]);

      let button = document.createElement('button');
      button.innerHTML = '請點我';
      button.addEventListener('click',()=>{
        __webpack_require__.e(/*! import() | async-module */ "async-module")
          .then(__webpack_require__.t.bind(null, /*! ./async-module.js */ "./src/async-module.js", 7))
          .then(result=>{// result = {__esModule:true,default:'模組內容'}
          console.log(result.default);
        });
      });
      document.body.appendChild(button);
    }),

  "./src/sync-module.js":
  /*!****************************!*\
      !*** ./src/sync-module.js ***!
       // 入口 chunk 依賴的同步模組
      \****************************/
  /*! exports provided: logMsg */
    (function(module, __webpack_exports__, __webpack_require__) {

      "use strict";
      __webpack_require__.r(__webpack_exports__);
      /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "logMsg", function() { return logMsg; });

      function logMsg() {
        console.log('我是同步模組');
      }
    })
});複製程式碼

(function(modules) { // webpack 的啟動程式碼自執行函式
  // The module cache 模組的快取
  var installedModules = {};

  // The require function webpack自己實現了一個require方法
  function __webpack_require__(moduleId) {

    // Check if module is in cache 判斷一下這個模組ID是否在快取中
    if(installedModules[moduleId]) {
      return installedModules[moduleId].exports;//如果有，說明此模組載入過，直接返回匯出物件exports
    }
    // Create a new module (and put it into the cache)
    // 建立一個新的模組物件並且把它放到快取中
    var module = installedModules[moduleId] = {
      i: moduleId,// 模組ID
      l: false,//是否已經載入loaded false
      exports: {} //匯出物件，預設是一個空物件
    };

    // Execute the module function 執行此模組對應的方法,目的是給module.exports賦值
    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;
  }

  // the startup function
  function startup() {
    // Load entry module and return exports
    // 載入入口模組並且返回匯出物件
    return __webpack_require__("./src/index.js");
  }

  // run startup 執行啟動方法
  return startup();
})
({

 "./src/hello.js":
 (function(module) {
   module.exports = "hello";
 }),
 "./src/index.js":
 (function(__unusedmodule, __unusedexports, __webpack_require__) {
    let hello = __webpack_require__( "./src/hello.js");
    console.log(hello);
 })
});複製程式碼

const babylon = require('@babel/parser');
// @babel/core 裡面內建了 babylon/parser，也可以用它來轉換 AST
const babel = require('@babel/core');
let types = require('@babel/types');
let generate = require('@babel/generator').default;
let traverse = require('@babel/traverse').default;

const originalSource = "const a = (a, b) => a + b;";

// 將 當前模組 的內容轉換成 AST
const ast = babylon.parse(originalSource);
// @babel/core 裡面內建了 babylon/parser，也可以用它來轉換 AST
// const ast = babel.parse(originalSource);

// 遍歷語法樹，尋找要修改的目標節點
traverse(ast, {
    // 如果當前節點是一個 箭頭函式 時
    ArrowFunctionExpression: (nodePath) => {
        let node = nodePath.node;
        let body = node.body;
        if(!types.isBlockStatement(node.body)){
            body = types.blockStatement([types.returnStatement(node.body)])
        }
        let newNode = types.functionExpression(null,node.params,body);
        nodePath.replaceWith(newNode);
    }
});

// 把轉換後的抽象語法樹重新生成程式碼
let {code} = generate(ast);
console.log('新的 code =>', code);複製程式碼

const babylon = require('@babel/parser');
let types = require('@babel/types');
let generate = require('@babel/generator').default;
let traverse = require('@babel/traverse').default;
const originalSource = `class Person{
    constructor(name){
        this.name = name;
    }
    getName(){
        return this.name
    }
}`;
// 將 當前模組 的內容轉換成 AST
const ast = babylon.parse(originalSource);
// 遍歷語法樹，尋找要修改的目標節點
traverse(ast, {
    // 如果當前節點是一個 class 時
    ClassDeclaration: (nodePath) => {
        let node = nodePath.node;
        let bodys = node.body.body;
        let id = node.id;
        bodys = bodys.map(body => {
            if (body.kind === 'constructor') {
                return types.functionExpression(id, body.params, body.body)
            } else {
                let left = types.memberExpression(id, types.identifier('prototype'));
                left = types.memberExpression(left, body.key);
                let right = types.functionExpression(null, body.params, body.body);
                return types.assignmentExpression('=', left, right);
            }
        });
        nodePath.replaceWithMultiple(bodys);
    }
});
// 把轉換後的抽象語法樹重新生成程式碼
let {code} = generate(ast);
console.log('新的 code =>', code);複製程式碼