1. Webpack structure

The package is a self-executing function

(function (module) {
    
    / / module
    var installedModules = {};
    
    // Here are the methods defined by WebPack
    
    function __webpack_require__(moduleId) {
      / /...
	}
    / /...
    
    // Load entry
    return __webpack_require__(__webpack_require__.s = "./src/index.js"); ({})"./src/a.js": function(.) {
            eval('... ')},"./src/index.js": function(.) {
            eval('... ')}})Copy the code

Let’s see that the module passed in is an object similar to the following

    {
        "./src/a.js": function(module, __webpack_exports__, __webpack_require__) {
            eval('... ') // Specify the file code
        },
        "./src/index.js": function(module, __webpack_exports__, __webpack_require__) {
            eval('... ') // Specify the file code}}Copy the code

What is missing when executed is the function for export and the other files that require loads

2. Understand installedModules first

InstalledModules is an object

Exports: {// exports: {// exports: {// exports: {// exports: {// exports: {// exports: {}}Copy the code

3. First understand the __webpack_require__ method

Function __webpack_require__(moduleId) {/******/ // check whether the module has been loaded if (installedModules[moduleId]) {// Return the exported result if it does return installedModules[moduleId].exports } // Create a new module (and put it into the cache) var module = InstalledModules [moduleId] = {I: moduleId, // exports: moduleId, // exports: Modules [moduleId]. Call (module.exports, module, module.exports, module, module. __webpack_require__ ) /******/ // Flag the module as loaded module.l = true /******/ // Return the exports of the module  return module.exports }Copy the code