深入webpack源码（一）开篇词

模块化

随着前端应用的复杂度提升，模块化的各种标准也随之出现和不断完善，现在主流的模块化方案有三种：AMD、commonjs、es module，后两种目前都只有node环境下可用，所以开发时的源码到生产时的目标代码需要经历打包，也就是处理模块依赖、生成一个或若干个文件的过程。

模块打包工具和webpack

模块打包工具经历了多年的发展也出现了很多优秀的解决方案，browserify、rollup、parcel、webpack等，browserify只打包js，所以一般会配合gulp或grunt来处理其他资源；rollup也是只处理js，但能生成比较小的bundle，可以对代码treeshaking，所以vue、react等库都是使用rollup打包的；parcel能处理各种资源，特点是零配置；webpack的loader机制使它也能处理各种资源，在2.x时实现了treeshaking，在4.x和即将到来的5.x也逐渐像零配置靠近，比如mode、presets等的出现。

现在主流的打包工具还是webpack，vue-cli、create-react-app都是基于webpack打包，angular-cli也支持webpack打包。所以webpack已经是现代前端必须掌握的技术了，无论用哪一种技术栈。

webpack的特点

webpack是一个模块打包器（module bundler），loader的机制使得它可以处理的模块不局限于js，可以是任意类型的资源。webpack会从一个入口模块开始分析依赖关系，构建依赖图，转换成目标环境支持的模块规范后，生成一个目标bundle。

• webpack支持插件机制，类似生命周期hook，可以在一些打包的中间阶段执行一些自定义的逻辑，webpack的大多数功能都是基于这种插件机制来实现的。

• webpack内置了开发服务器（DevServer），可以本地启http或者https的服务器，运行打包后的代码，并且支持接口的代理。支持HMR（hot module replacement），在代码改动之后不需要刷新浏览器就能看到最新的代码执行结果。

• webpack支持treeshking，基于esm的js模块可以把一些没用到的export在打包过程中删掉。

• webpack支持dynamic import，可以把一些模块分离到独立的bundle中异步加载。

• webpack支持 split chunks，通过配置的规则来把被多个模块共用的模块分离到一个独立的chunk中。

• webpack支持code spliting，可以通过多入口、dynamic import，split chunks的方式来把代码分割成多个bundle。

webpack内置了很多的强大的功能，并且很多优秀的第三方的插件使得webpack的功能更强大。

为什么要深入webpack源码

随着对webpack配置项的不断熟悉，也写过一些webpack的插件，但也仅限于熟练使用，并不能说对webpack有一个深入的理解。这使我产生了探究webpack实现原理的好奇。

最近断断续续看了一些源码，对webpack的原理和各种配置项的作用有了更深层次的理解，同时也发现了一些优秀的代码架构方式和设计模式，同时也对一些webpack所依赖的ast解析、模块查找等相关库有了进一步的了解。

总结一下，目的主要有几点：

1. 对webpack的核心概念和打包流程有更深入的理解

2. 学习webpack源码中的优秀架构方式和一些设计模式

3. 熟悉webpack实现过程中所以来的ast解析、模块查找等库

4. 为了更好的写出一些plugin和loader，来完善前端工程化的工具链

关于本系列文章

目前我在逐步的看webpack的源码，有一些心得。源码的内容还是很多的，全部看完再写可能要等好久，我打算边看变写，因此内容的顺序可能并不是最佳的。我会力求准确，但难免会有一些错误，欢迎大家指正。

参考链接

Grunt vs. Gulp vs. webpack: An Elaborate Comparison of Tools

webpack 官方文档