本文主要说明Webpack模块构建和加载的原理，对构建后的源码进行分析。

 一 说明

本文以一个简单的示例，通过对构建好的bundle.js源码进行分析，说明Webpack的基础构建原理。

本文使用的Webpack版本是4.32.2版本。

注意：之前也分析过Webpack3.10.0版本构建出来的bundle.js，通过和这次的Webpack 4.32.2版本对比，核心的构建原理基本一致，只是将模块索引id改为文件路径和名字、模块代码改为了eva l(moduleString)执行的方式等一些优化改造。

二 示例

1）Webpack.config.js文件内容：

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development' // 'production' 用于配置开发还是发布模式
};

2）创建src文件夹，添加入口文件index.js:

import moduleLog from './module.js';

document.write('index.js loaded.');

moduleLog();

3）在src目录下创建module.js文件：

export default function () {
    document.write('module.js loaded.');
}

4）package.json文件内容：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  },
  "dependencies": {
    "lodash": "^4.17.4"
  }
}

三 执行构建

执行构建命令：npm run webpack

在dist目录下生成的bundle.js源码如下（下边代码是将注释去掉、压缩的代码还原后的代码）：

(function (modules) {
    // 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) {