一、入口文件main.js
// main.js
console.log('webpack');
二、出口文件bundle.js
1、浏览代码
2、本质
// 实际就是一个自执行函数
(function(modules) {
//...
})([function(module,exports){
console.log('webpack');
}])
这个自执行函数接收一个参数，这个参数是一个模块数组，这个数组里存放我们打包的入口模块，以及这个模块的依赖模块，在这里我们没有依赖模块。
三、代码解读
1、定义一个对象
用来缓存加载进来的模块（加载进来和加载完毕是两个概念）。
// The module cache
/******/ var installedModules = {};
2、声明一个函数
用来加载模块。该函数接收一个moduleId为参数，moduleId就是webpack打包时，你在命令行看到的最下面一行打包文件的详细信息的最开头的数字。
function __webpack_require__(moduleId) {
//...
}
下面，进入该函数内部继续分析。
A、检查函数是否被缓存
为了防止重复打包，这里需要检查该函数是否已经被加载了，进而保证每个模块只会被加载一次。
// Check if module is in cache
if(installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
B、创建一个module对象
该对象有3个属性，i是index的缩写，表示moduleid；l是loaded的缩写，表示是否已经被加载；exports是对象，用来加载依赖。
// Create a new module (and put it into the cache)
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};
C、执行传进来的模块
因为main.js没有任何依赖模块，因此，该模块函数没有第三个参数，__webpack_require__也不会被传进去。
// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
D、修改l的值，返回module.exports
// Flag the module as loaded
module.l = true; // Return the exports of the module
return module.exports;
3、为函数添加属性方法
A、m(module)的赋值
// expose the modules object (__webpack_modules__)
__webpack_require__.m = modules;
B、c(cache)的赋值
// expose the module cache
__webpack_require__.c = installedModules;
C、d的赋值，更改当前加载进来的模块的属性配置
进入该方法前，判断了一下__webpack_require__上是否有o方法，来确定加载进来的模块是否是入口模块，因为入口模块总是被第一个加载进来，o方法会在d方法后面被定义。
// 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
/******/ });
/******/ }
/******/ };
D、n的赋值，根据模块加载机制的不同做出不同的响应，module.__esModule为es6模块加载机制。
// 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;
/******/ };
E、o的赋值，包装一下Object.prototype.hasOwnProperty。
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
F、p的赋值
// __webpack_public_path__
/******/ __webpack_require__.p = "";
4、返回函数
// Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
四、总结
对于没有依赖模块的模块来说，上面说的几乎没用。毕竟webpack是用来进行模块打包的，只有一个模块，webpack的作用就发挥不了了。