Implement a simple Webpack from 0 to 1

// Find the code here
Webpack has two command-line tools: webpack-cli and webpack-command
// Since webpack-cli is more powerful, webpack-cli is usually used, so the following statement is executed
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]
    ));
} Copy the code

// Debugger.js is the same as packge.json in the project
// Right clicking debugger.js is equivalent to running webPack with NPX webPack
// NPX webpack uses node to execute cli.js under bin
// npx webpack = node ./node_modules/webpack-cli/bin/cli.js
// Go to webpack-cli/bin/cli.js, set a breakpoint, and start debugging (this is the first method)
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']
));Copy the code

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

compiler.run((err, stat) = > {
  console.log(err);
  console.log(stat)
});Copy the code

const path = require('path');
module.exports = {
    // Package the code in development mode!!!!!!
    mode:'development'.devtool:'none'.entry:'./src/index.js'.output: {path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'}};Copy the code

// src/index.js
import {logMsg}  from './sync-module';
console.log(logMsg);
let button = document.createElement('button');
button.innerHTML = 'Please click on me';
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 = "I'm an asynchronous module.";


// src/sync-module.js
export function logMsg() {
    console.log('I'm a sync module');
}Copy the code

/* src/ index.js sync-module.js async-module.js */
// When webpack is packaged, the relative path of the reference module is changed to that of webpack.config.js
// add "./sync-module.js" to index.js => will become "./ SRC /sync-module.js"

// Webpack starts the code's self-executing function
(function(modules) { // webpackBootstrap

  // install a JSONP callback for chunk loading
  function webpackJsonpCallback(data) {
    // data => [
      // [chunkName],
      // {chunkID: chunk content}
    // ]
    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]
        ????????????????
        resolves.push(installedChunks[chunkId][0]);
      }
      // If the value is set to 0, the loading is successful
      installedChunks[chunkId] = 0;
    }
    for(moduleId in moreModules) {
      if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
        // After the asynchronous chunk load is complete, merge the asynchronous chunk code into modules
        // When the chunk is loaded later, it can be retrieved directly from modules
        // Key is the module ID and value is the module contentmodules[moduleId] = moreModules[moduleId]; }}if(parentJsonpFunction){
      parentJsonpFunction(data);
    }

    while(resolves.length) {
      / / resolve executionresolves.shift()(); }}// The module cache
  // Normal module cache: whenever a module is loaded and initialized once, it is put here
  // Get it directly from here, no need to initialize it again
  var installedModules = {};


  // object to store loaded and loading chunks
  // ！！！！！！！！！！！！！！！！！！！！！！
  // Store the loaded or loaded chunk (the chunk includes the import chunk and the asynchronously loaded chunk)
  // ！！！！！！！！！！！！！！！！！！！！！！
  // installedChunks specifies the value of each key in the installedChunks object
  // undefined = chunk not loaded, null = chunk preloaded/prefetched
  // undefined indicates that chunk is not loaded, and null indicates that chunk is preloaded
  // Promise = chunk loading, 0 = chunk loaded
  // Promise indicates that chunk is loading. 0 indicates that chunk loading is complete
  var installedChunks = {
    // For single entry, the default key is main
    "main": 0
  };


  // script path function
  // Set the request URL for asynchronous chunk
  function jsonpScriptSrc(chunkId) {
    return __webpack_require__.p + "" + chunkId + ".bundle.js"
  }

  // The require function
  Webpack implements a require method that can be run directly in a browser
  function __webpack_require__(moduleId) {

    // Check if module is in cache
    // Before loading a module, check the cache list to see if it has been loaded
    if(installedModules[moduleId]) {
      // If yes, the module has been cached and returns the exported object of the module
      return installedModules[moduleId].exports;
    }
    // Create a new module (and put it into the cache)
    // Create a new module object and place it in the cache list
    var module = installedModules[moduleId] = {
      / / module ID
      i: moduleId,
      // Loaded :false
      l: false.// The module exports the object, which is an empty object by default
      exports: {}
    };

    // Execute the module function
    // Load the module
    Modules is an argument received by a self-executing function -- an object containing module information
    // Key is the module path, value is a function that contains the contents of the module
    / / {
    // "./src/a.js":
    // (function(module, __webpack_exports__, __webpack_require__) {
    // Module content: XXX
    // Module content: XXX
    // Module content: XXX
    / /},
    // }
    // Find the corresponding key from modules, execute the function (value) and point the internal this to the exports object of the new Module above
    // The purpose is to place the contents inside functions in module.exports
    modules[moduleId].call(module.exports, module.module.exports, __webpack_require__);

    // Flag the module as loaded
    // Set it to loaded
    module.l = true;

    // Return the exports of the module
    // Finally returns the contents of the current module
    return module.exports;
  }

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

    // JSONP chunk loading for javascript
    // Use JSONP to request loading of asynchronous chunks
    var installedChunkData = installedChunks[chunkId];

    // 0 means "already installed".
    // If the chunk to load is not initialized
    if(installedChunkData ! = =0) {

      // a Promise means "currently loading".
      // If 0 is excluded, undefined/null/Promise is left in the cache chunk list
      // When the module is being loaded
      if(installedChunkData) {
        promises.push(installedChunkData[2]);
      }
      // When the module has not been loaded yet
      else {
        // setup Promise in chunk cache
        var promise = new Promise(function(resolve, reject) {
          // When a new promise is created, its function body is immediately executed
          // Set the state of the current chunk to Promise, indicating that it is loading
          installedChunkData = installedChunks[chunkId] = [resolve, reject];
        });
        // Add a value to the current installedChunkData
        // Then add installedChunkData to Promises array
        promises.push(installedChunkData[2] = promise);

        // start chunk loading
        // Use JSONP to request loading of asynchronous chunks
        var script = document.createElement('script');
        var onScriptComplete;

        script.charset = 'utf-8';
        script.timeout = 120;
        if (__webpack_require__.nc) {
          script.setAttribute("nonce", __webpack_require__.nc);
        }
        // Set the request URL
        script.src = jsonpScriptSrc(chunkId);

        // create error before stack unwound to get useful stacktrace later
        var error = new Error(a); 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); }}// Execute all promises and return the result
    return Promise.all(promises);
  };

  // expose the modules object (__webpack_modules__)
  // Place the list of modules on the m attribute __webpack_require__
  __webpack_require__.m = modules;

  // expose the module cache
  // Place the cache list on the __webpack_require__ c property
  __webpack_require__.c = installedModules;

  // define getter function for harmony exports
  // Define the getter for the name property on the exports object
  __webpack_require__.d = function(exports, name, getter) {
    // Check whether the name attribute exists on the exports object
    if(! __webpack_require__.o(exports, name)) {// Add the name attribute to the exports object, which can be enumerated to true
      // The value of get is getter, which is executed when the property is accessed
      Object.defineProperty(exports, name, { enumerable: true.get: getter }); }};// define __esModule on exports
  // Define an __esModule attribute on the Exports object that determines whether the current module is an ES6 module
  __webpack_require__.r = function(exports) {
    // If the current browser supports Symbol
    if(typeof Symbol! = ='undefined' && Symbol.toStringTag) {
      / / set before
      // console.log(exports.toString()); // [object Object]
      // Set the exports object type to Module
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
      / / set
      // console.log(exports.toString()); // [object Module]
    }
    // Add an ESM attribute to the Exports object otherwise
    Object.defineProperty(exports, '__esModule', { value: true });
  };

  // Create a fake Namespace object Creates a namespace object/ Why create a namespace object?// Because import('xxx.js') loads js, it can be ESM or CJS
  // So compatibility processing is required
  // mode & 1: value is a module id, require it
  // mode & 2: merge all properties of value into the ns nameSpace
  // mode & 4: return value when already ns object
  / / mode & 8 | 1: fitting concepts like the require the same as the require
  // how to use binary mode? Efficient. To save memory
  7 => 111 readable, writable and executable
  __webpack_require__.t = function(value, mode) {
    // value starts with the module ID
    // Load the module directly
    if(mode & 1) value = __webpack_require__(value);
    // Return the contents of the module without loading the module
    if(mode & 8) return value;
    // Return value if value is already an object and the __esModule attribute is true
    if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
    // Otherwise create an empty object, load it,
    var ns = Object.create(null);
    // Set the __esModule property to true on the object
    __webpack_require__.r(ns);
    // Define a default attribute for the ns object
    Object.defineProperty(ns, 'default', { enumerable: true.value: value });
    // If mode is 2 and value is not a string, define all attributes of the value to the ns object
    if(mode & 2 && typeofvalue ! ='string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
    return ns;//{__esModule:true,default:' module contents '}
  };

  // getDefaultExport function for compatibility with non-harmony modules
  // a function that gets the contents of the module
  __webpack_require__.n = function(module) {
    // If __esModule is an ES6 module, return the default attribute of the module
    // If not, it is a CJS module and returns the module itself
    var getter = module && module.__esModule ?
      function getDefault() { return module['default']; } :
      function getModuleExports() { return module; };
    // Add a property of A to the getter, the getter method itself
    __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__
  // Expose the access path
  __webpack_require__.p = "";

  // on error function for async loading
  // Error output while loading asynchronous chunk
  __webpack_require__.oe = function(err) { console.error(err); throw err; };


  // The window["webpackJsonp"] will be an empty array when first executed
  // jsonpArray and window["webpackJsonp"] both point to the same memory address
  var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] | | [];// Bind this to keep the old array push method pointing to jsonpArray
  var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
  ParentJsonpFunction (data) is executed in webpackJsonpCallback if this is not bound
  // This is equivalent to a "naked" array native push, where data doesn't know who to add to
  // var oldJsonpFunction = jsonpArray.push;

  // Override the jsonArray push method and assign it to webpackJsonpCallback
  jsonpArray.push = webpackJsonpCallback;
  jsonpArray = jsonpArray.slice();
  for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
  // Why keep the old array push method?
  // Avoid "repeated requests" to load chunks, if they are already loaded, use them directly
  var parentJsonpFunction = oldJsonpFunction;

  / / summary:
  // the push method of window["webpackJsonp"] has been overridden to implement the jsonp callback instead of the array native method
  // 2, If you want to add data to the array window["webpackJsonp"], you can't push it
  // 3, so define a jsonpArray array, which points to the same memory address as window["webpackJsonp"]
  // 4. Add (push) data to jsonpArray, and the corresponding window["webpackJsonp"] gets the data

  // Load entry module and return exports
  // Load the entry module and return the exported object
  return __webpack_require__(__webpack_require__.s = "./src/index.js");
})
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/* src/ index.js sync-module.js async-module.js */
// When webpack is packaged, the relative path of the reference module is changed to that of webpack.config.js
// add "./sync-module.js" to index.js => will become "./ SRC /sync-module.js"

({
  // Key is the module ID and value is the module content
  "./src/index.js":
  / *! * * * * * * * * * * * * * * * * * * * * * *! *\ // entry 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 = 'Please click on me';
      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:' module contents '}
          console.log(result.default);
        });
      });
      document.body.appendChild(button);
    }),

  "./src/sync-module.js":
  / *! * * * * * * * * * * * * * * * * * * * * * * * * * * * *! * \! *** ./src/sync-module.js ***! / / entrance to the chunk rely on synchronous module \ * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
  / *! 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('I'm a sync module'); }})});Copy the code

(function(modules) { // The webpack startup code executes itself
  // The module cache Is The cache of The module
  var installedModules = {};

  // The require function webpack implements its own require method
  function __webpack_require__(moduleId) {

    // Check if module is in cache
    if(installedModules[moduleId]) {
      return installedModules[moduleId].exports;// If yes, this module is loaded and returns exported object exports directly
    }
    // Create a new module (and put it into the cache)
    // Create a new module object and place it in the cache
    var module = installedModules[moduleId] = {
      i: moduleId,/ / module ID
      l: false.// Whether loaded false
      exports: {} // Export object, default is an empty object
    };

    // Execute the module function executes the corresponding method of this module to assign a value to 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 returns the exports of the module
    return module.exports;
  }

  // the startup function
  function startup() {
    // Load entry module and return exports
    // Load the entry module and return the exported object
    return __webpack_require__("./src/index.js");
  }

  // run startup Executes the startup method
  returnstartup(); ({})"./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); })});Copy the code

const babylon = require('@babel/parser');
// @babel/core has Babylon /parser built in, which can also be used to convert 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;";

// Convert the contents of the current module into an AST
const ast = babylon.parse(originalSource);
// @babel/core has Babylon /parser built in, which can also be used to convert AST
// const ast = babel.parse(originalSource);

// Walk through the syntax tree to find the target node to modify
traverse(ast, {
    // If the current node is an arrow function
    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); }});// Re-generate the code from the transformed abstract syntax tree
let {code} = generate(ast);
console.log('New code =>', code);Copy the 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 } }`;
// Convert the contents of the current module into an AST
const ast = babylon.parse(originalSource);
// Walk through the syntax tree to find the target node to modify
traverse(ast, {
    // If the current node is a 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); }});// Re-generate the code from the transformed abstract syntax tree
let {code} = generate(ast);
console.log('New code =>', code);Copy the code