第一次写这种笔记，只能浅浅谈一下咯。

知识点梳理:

有关Webpack的核心概念:

Entry顾名思义：入口，Webpack可以从这里开始构建内部依赖图； Output相反就是：出口，指明Webpack打包后的资源 undles输出的位置以及文件名； Loader:用于对模块源代码进行转换和处理,如TS to JS，CSS to style等； Plugin:扩展Webpack功能，在Webpack构建流程中的特定时机注入扩展逻辑来改变构建结果； Chunk:代码块，一个Chunk由多个模块组合而成，用于代码分割； Webpack的工作原理： 从Entry开始递归解析出所有依赖的模块，构建成一个依赖图(AST)； 根据依赖图每个模块被Loader转换后，输出到指定Outpu路径； 在构建过程中Plugin完成其扩展功能； 最终输出由多个Chunk组合而成的浏览器可运行的静态资源。 Webpack的核心功能: 转换ES6，TypeScript等代码到ES； 转换样式文件为CSS添加前缀等； 处理HTML/CSS/Image等其他资源文件； 对代码/样式/资源进行压缩合并； 生成SourceMap方便调试； 实现代码热更新和模块热替换等。

如何学习好这个呢，当然我们要先了解Webpack的基础概念和工作原理，从简单demo 和配置入手； 多调试Webpack配置，了解各个功能的用法； 进阶后了解代码分割、动态导入、性能优化等高级特性； ~~同时我们也可以尝试自己实现简易的~ Webpack 打包功能；实践出真知嘛。 通过逐步从基础到进阶的学习，可以更好地掌握 Webpack 的使用。也要通过项目实践不断总结和升华，将知识内化成能力。祝大家学习愉快。