webpack 的运行过程可分为：读取配置参数，实例化插件，模块解析处理（loader），输出打包文件；在上面例子中，仅为 JavaScript 的引用，没有使用插件和像CSS、less、图片之类需要loader处理的模块，所以上面的例子，过程只有读取配置，识别入口及其引用模块，打包几步，生成最终的 bundle.js 文件。
简单描述下 webpack 在这个过程中的执行流程：在配置文件中读取入口，如果有配置 plugins 参数，那么也是在此时进行插件的实例化和钩子函数的绑定；模块解析，也就是loader加入的时刻，从入口文件开始，根据入口文件对其他模块的依赖，结合配置文件中对不同种类型文件所使用的 loader（加载器） 说明，一个一个逐级对这些模块进行解析处理，或压缩，或转义，生成浏览器可以直接识别的内容；最后将所有模块进行打包，输出打包后的文件。在上面的代码中，已经对 bundle.js 内容进行了内容注释，下面我们来分析下 bundle.js 的执行过程：
1、自执行函数
最后的输出的文件 bundle.js 是一个 JavaScript 文件，其本身其实是一个自执行函数
(function(参数){})(参数)。
2、参数
自执行方法的参数为所有模块组成的对象，key 为各个模块的路径，值为各模块内部的执行代码，观察参数内部的代码，对比打包前的源码，可以发现凡是 require 都变成了__webpack_require__这个webpack自定义的模块调用方法，而且源码中的相对路径也变成了最终执行位置的文件的相对路径。
{ "./app/bye.js": (function(module, exports, __webpack_require__) { eval("const to = __webpack_require__(/*! ./to.js */ \"./app/to.js\");\nmodule.exports = function() {\n var bye = document.createElement('div');\n bye.textContent = \"Say Bye to \" + to.name;\n return bye;\n};\n\n//# sourceURL=webpack:///./app/bye.js?"); }), "./app/hello.js": (function(module, exports) { eval("module.exports = function() {\n var hello = document.createElement('div');\n hello.textContent = \"Say Hello!\";\n return hello;\n};\n\n//# sourceURL=webpack:///./app/hello.js?"); }), "./app/main.js": (function(module, exports, __webpack_require__) { eval("const hello = __webpack_require__(/*! ./hello.js */ \"./app/hello.js\");\nconst bye = __webpack_require__(/*! ./bye.js */ \"./app/bye.js\");\n\ndocument.querySelector(\"#root\").appendChild(hello()).appendChild(bye());;\n\n//# sourceURL=webpack:///./app/main.js?"); }), "./app/to.js": (function(module, exports) { eval("module.exports = {name: \"小明\"};\n\n//# sourceURL=webpack:///./app/to.js?"); }) }
3、执行
（1）自执行文件开始执行后，到自执行函数最底部，首先从入口文件开始加载
return __webpack_require__(__webpack_require__.s = "./app/main.js");
（2）__webpack_require__函数被调用，传入参数 ./app/main.js，