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的结果进行缓存。