我们来看一下webpack打包出来的代码到底是什么样子:
其中我删除了一部分与业务逻辑无关的代码,便于观看,我对各个部分做了细节注释:
(function(modules) {
// webpackBootstrap
// The module cache 先定义一个缓存
var installedModules = {
};
// The require function 配置实现了require方法,将require转化为__webpack_require__
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__)