webpack一般会帮我们把所有的文件（js，css，图片等）编译成一个js文件（webpack安装，使用），一般这个文件名为bundle.js。我们直接在html文件中用script标签引入就行了，就想下面这样：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>那bundle.js文件如何组织我们的资源文件的呢，我们下面通过一个例子看一下
创建entry.js文件
module.exports = "我是入口js！";运行下面命令
webpack ./entry.js bundle.js会生成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] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function 执行模块方法
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded 标记已被加载的模块
/******/ module.loaded = 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;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {
module.exports = "我是入口js！";
/***/ }
/******/ ]);立即调用的函数表达式(Immediately-Invoked Function Expression)
其实bundle.js文件里就是一个立即调用的函数表达式（Immediately-Invoked Function Expression）像下面这样：
(function(/*parameter*/){
/* code */
})(/*argument*/)这个函数里定义了一个变量installedModules和一个函数function __webpack_require__(moduleId)。当bundle.js被加载到浏览器这个函数就会立即执行。
模块缓存 installedModules
// The module cache 模块缓存
var installedModules = {};所有被加载过的模块都会成为installedModules对象的属性。这一步主要是靠函数__webpack_require__做到的。
加载方法 webpack_require
// 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] = {
exports: {},
id: moduleId,
loaded: false
};
// Execute the module function 执行模块方法
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// Flag the module as loaded 标记已被加载的模块
module.loaded = true;
// Return the exports of the module 返回模块的输出
return module.exports;
}
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。