webpack系列 — 总览
type
status
date
slug
summary
tags
category
icon
password
解决什么问题
在传统的前端开发模式中，稍微大一些的项目一定会遇到的一些问题
(一) 依赖管理
大项目模块依赖关系会很复杂，需要小心的管理模块插入顺序，避免重复加载模块，模块依赖发生变化时也需要手动维护。容易出错且效率很低
(二) 代码拆分
真实项目中为了提高性能往往会对代码进行拆分，比如用户当前在首页，那么某个子页面的代码可以等用户真的访问时才加载，以提高首屏的性能。这就要求将子页面的代码以及子页面依赖的其他代码拆分出来，只在有需要时才加载。真实项目中子页面依赖的模块又有可能被首页或其他子页面依赖，如何拆分代码保证页面能正常工作的同时还尽可能少的重复加载模块就会很复杂，手动维护费时费力。
所以就有人想到了可以给模块间的依赖关系进行建模，然后用算法自动进行模块的管理和代码拆分。这种给代码建模并进行管理的工具就是构建工具。
建模
很自然能想到模块和模块的依赖关系可以用一个有向无环图来进行建模(DAG)。
建模之后就有很大的发挥空间了。通过对DAG的分析，我们可以自动计算出模块加载的正确顺序，也可以在指定要做代码拆分的部分后自动计算如何进行拆分。webpack本质上就是在生成然后操作这么一个DAG的依赖图。他在生成和操作的过程中也允许外部通过注册插件进行功能的扩充。
加载器 loader
js文件可以被纳入到建模的范围里，那么其他类型的文件呢？比如css，比如图片等。这些文件本质上也是DAG中的一部分，确实有人依赖他们，但是你没办法把他们像js代码一样进行拼接。但是如果不把他们纳入建模的范围，那么就又得手动处理他们。所以构建工具就引入了(加载器)loader这个概念。本质上就是在把文件纳入建模系统前先做一次预处理。比如对于某个css文件
可以预处理成
这样css就也变成了js代码，可以正常进行建模。
但是loader这个概念其实想象空间很大，你可以用它干的事非常多。比如你可以用loader将typeScript的代码预处理成JavaScript的代码，可以将svg图片预处理成react的组件等。
更详细的loader说明可以看：
webpack系列 — 加载器依赖分析
依赖分析本质上就是通过分析js代码来获取模块和模块的依赖关系。webpack使用acorn拿到代码的抽象语法树。然后查找其中的import或require语句，就可以分析出当前模块依赖了哪些模块。
代码拆分
既然我们已经建模了，那么做代码拆分时，具体代码怎么拆，公共的依赖怎么处理，我们不用太费心。我们只需要告诉构建工具我们要从DAG中的哪个节点开始拆。webpack约定的“沟通方式”就是 import 函数。
如果某个模块是用import函数导入的，那么webpack就知道这个模块是需要做按需加载的。实际运行时当代码执行到import函数时才会真的去加载相关的代码，并返回一个promise。import函数现在已经纳入到ESM，成了标准规范的一部分。
插件系统
为了提高可玩性，webpack提供了强大的插件机制。webpack定义出了构建的各个阶段，我们的插件可以通过订阅不同的阶段来介入构建流程。webpack暴露的生命周期主要通过两个对象来组织，compiler和compilation。
Compiler
代表完整的webpack环境，暴露的生命周期都是全局构建过程
Compilation
代表单次构建的上下文，管理模块和资源的生成
插件可以极大的增强webpack的功能。在大型复杂应用中掌握插件的开发也是必备技能。
具体的插件系统分析和例子可以看:
webpack系列 — 插件系统以上非常笼统的介绍了webpack的整体原理，没有设计太多的技术细节。旨在说明webpack解决的问题和宏观的设计。后面会详细分析webpack的各个环节和技术细节。