Webpack 4之后，很多配置都简化了，整体基本使用并不复杂。在这种配置并不复杂的前提下，对它的掌握主要看能否理解它的工作机理和原理。 包装的核心工作原理:Webpack官网首页已经描述了它的工作原理。 在Webpack的思路里，JS，CSS，图片，字体等。都属于一个模块。 Webpack可以通过最终聚集将它们打包在一起。 在Webpack的整个打包过程中，Loader用于加载特殊类型的资源，比如加载样式和图片。插件用于实现各种自动构建任务，比如自动压缩。Webpack启动后，项目中的一个指定文件(通常是一个JS文件)将作为一个条目被找到。 然后按照导入文件中的代码，根据代码中出现的import(ES Modules)或require(CommonJS)等语句，分析推断出这个文件所依赖的资源模块，然后分别分析每个资源模块的依赖关系，重复循环，最后在整个项目使用的所有文件之间形成依赖树。 在整个打包过程中，加载器机制起着非常重要的作用(没有加载器，各种类型的资源文件都无法加载)。对于依赖模块中无法用JavaScript代码表示的资源模块，比如图片或者字体文件，一般加载器会单独将其作为资源文件复制到输出目录，然后将该资源文件对应的访问路径作为该模块的导出成员对外公开。 自己设置插件不会影响Webpack的核心工作流程，但是为了提供强大的扩展能力，Webpack为整个工作流程的每一个环节都预制了一个钩子，也就是说我们可以通过插件将自己设置的少量任务植入到Webpack工作流程的任何一个环节，从而扩展Webpack的打包功能之外的能力(目的是处理其他loader无法实现的事情)。 结果打包操作原理将Webpack的工作模式设置为none，这样Webpack会以原始状态打包，得到的代码更容易理解和阅读。 (VSCode中折叠代码的快捷键是Ctrl+K，Ctrl+0)整体生成的代码实际上是一个立即执行函数。这个函数是Webpack Bootstrap，它接收一个modules参数，并在被调用时传入一个数组。 展开这个数组，里面的元素的函数就和我们源代码中的模块相对应了，也就是说每个模块最后都被包裹在这样的函数中，从而实现了模块的私有范围来执行Webpack工作入口函数(我在注释旁边加了一点翻译)。首先，定义一个installedModules对象来存储或缓存加载的模块。然后定义一个require函数(这个函数用来加载模块)，然后在require函数上挂载少量剩余的数据和工具函数。 这个函数执行结束，调用require函数，传入的模块id为0，模块开始加载。 模块id实际上是模块数组的元素下标，也就是说源代码中所谓的入口模块就是从这里开始加载的。 最后，如果你想更好地了解包结果的执行过程，你可以将它运行到浏览器中，并通过开发者工具进行调试。