webpack打包结果的分析

webpack支持多种模块化

webpack实际上是实现了一套属于自己的模块化。无论你是用CommonJS规范还是ES6模块化规范，他都将你的模块导入导出方式转换为自己的一套模块化。

打包结果总结

Webpack在打包过程中首先定义了一个立即执行函数（iife），在这个函数中创建了一个名为__webpack_modules__的对象，用于存储所有模块的定义。每个模块的代码都被整合在一起，并以模块路径作为key，对应的模块函数作为value。

随后，Webpack定义了模块缓存对象__webpack_module_cache__和模块加载函数__webpack_require__。模块加载函数的作用是加载模块，首先会检查缓存中是否已经存在该模块，如果存在则直接返回该模块的exports对象。如果缓存中没有该模块，则根据传入的模块路径从__webpack_modules__中获取模块定义，并执行该模块的代码。在执行模块函数时，会将__webpack_module_cache__、空的exports对象以及模块函数本身作为参数传入，执行该模块代码时会先调用__webpack_require__.d和__webpack_require.r这两个函数，将exports对象写入缓存内容。最终，模块加载函数会返回执行后的exports对象。

此外，Webpack还定义了一些运行时函数，如__webpack_require__.d用于定义模块的导出，__webpack_require.o用于判断对象是否具有某个属性，__webpack_require.r用于将模块标记为ES模块。这些运行时函数在整个应用程序的执行过程中发挥重要作用，帮助实现模块之间的依赖管理和导出导入功能。

最后，在入口文件中引入其他模块时，利用模块加载和缓存机制，调用__webpack_require__函数加载模块。如果模块尚未缓存，则会设置一个新的空的exports对象，并执行对应模块的函数。同时，会调用.d和.r函数来处理模块的导出和标记，最终返回包含模块导出内容的exports对象。整个过程有效地管理了模块间的依赖关系，实现了模块化管理的功能和可靠性。

以上是我简单的一个总结。

操作案例

1、首先创建进入一个目录并初始化 npm并安装webpack

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

     这时我们的目录里生成了 package.json文件和用于存放依赖。

2、现在创建以下目录结构、文件和内容：