webpack生成代码

webpack.config.js

const path = require('path');

module.exports = {
  entry: './file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

file.js

var tmp = require('./test.js');
console.log(tmp.name)

test.js

var a= require('./2.js');
module.exports = {name: 'ok'}

2.js

module.exports = {name:"hello"}

打包后，生成的bundle.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, {
                configurable: false,
                enumerable: true,
                get: getter
            });
        }
    };
/******/
    // 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 = 0);
})
/************************************************************************/
([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

var tmp = __webpack_require__(1);
console.log(tmp.name)

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

var a= __webpack_require__(2);
module.exports = {name: 'ok'}

/***/ }),
/* 2 */
/***/ (function(module, exports) {

module.exports = {name:"hello"}

/***/ })
]);

首先从生成的代码中我们看到，其实是一个立即执行函数，后面的代码就是传进去的参数，是一个数组，也就是我们定义的模块。定义一个webpack_require函数，并且给这个函数挂载了一些属性。
最后执行webpack_require（起始模块id），然后就是递归地解析依赖，并且把require的结果进行缓存。