webpack 最简打包结果分析
内容提要
文章以 webpack4 无配置打包为例，分析最简打包结果：安装 webpack 与 webpack-cli 后，以 src/index.js 为入口，devtool 设为 source-map 便于查看。打包文件核心是 __webpack_require__ 函数，先定义模块缓存与辅助方法，再加载入口模块，递归读取依赖并执行，最后通过 __webpack_exports__ 输出。import 转为 __webpack_require__，export 转为属性赋值或 __webpack_require__.d。
延伸解读
理解 __webpack_require__ 的缓存机制
打包结果中，__webpack_require__ 函数首先检查模块是否已在 installedModules 缓存中。若存在则直接返回缓存 exports，避免重复执行。这解释了为何多次 import 同一模块不会导致代码重复运行，也意味着模块内部状态在单次打包中共享。缓存机制是 webpack 模块化运行时的基础，理解它有助于调试模块加载顺序和循环依赖问题。
ES Module 导出转换的两种方式
文章显示，export 在打包后有两种处理：直接赋值给 __webpack_exports__['default']，或通过 __webpack_require__.d 定义 getter。后者用于具名导出，保持实时绑定特性，即导出值变化时导入方也能获取最新值。而默认导出直接赋值则不具备这种动态性。这反映了 webpack 对 ES Module 语义的模拟，开发者可借此理解不同导出写法的运行时差异。
devtool 配置对可读性的影响
默认开发模式下，webpack 用 eval 包裹模块，导致打包文件难以直接阅读。文章通过设置 devtool: 'source-map' 改变了输出结构，使模块以函数形式清晰呈现，并附带注释。这提示我们，在需要分析打包结果或调试时，调整 devtool 能显著提升代码可读性，但也会影响构建速度和产物大小，需根据场景权衡。
Q&A
webpack4 无配置打包需要安装哪些包？
只需要安装 webpack 和 webpack-cli，使用命令 npm i webpack webpack-cli -D。
如何让 webpack 打包后的文件便于查看？
在 webpack.config.js 中设置 devtool: 'source-map'，这样打包后的文件不会用 eval 包裹，便于查看。
webpack 打包结果中的 __webpack_require__ 函数有什么作用？
__webpack_require__ 是 webpack 的核心请求函数，用于加载模块：检查模块缓存，若不存在则创建新模块并放入缓存，执行模块函数，最后返回模块的 exports。
webpack 如何处理 ES6 的 import 和 export？
import 会被转换为 __webpack_require__ 调用，export 会被转换为 __webpack_exports__['default'] 直接赋值或使用 __webpack_require__.d 定义 getter。
webpack 打包后的模块加载流程是怎样的？
流程为：定义 __webpack_require__ 及其辅助函数；使用 __webpack_require__ 引入入口模块；__webpack_require__ 载入模块并放入缓存；调用模块；递归使用 __webpack_require__ 读取依赖；运行模块内部功能；通过 __webpack_exports__ 输出；运行结束。
webpack 打包结果中 __webpack_require__.d 和 __webpack_require__.r 分别有什么用途？
__webpack_require__.d 用于为 ES6 export 定义 getter 函数，__webpack_require__.r 用于在 exports 上定义 __esModule 属性，标识 ES 模块。
