Webpack学习-工作原理(上)

2,582 阅读5分钟
  • 原文地址:http://wushaobin.top/2019/02/12/webpackPrinciple/

对于webpack的认识始终停留在对脚手架的使用,不得不说脚手架既方便又好用,修改起来也方便,只需要知道webpack中各个配置项的功能,于是对于我们来说,webpack始终就是一个黑盒子,我们完全不清楚里面是如何去运作的。打包时报错,就只能借助google来协助帮忙解决问题,至于为什么要这样解决,什么原理,不管,能解决就好。那么,了解一下基本原理也是有必要。

概念

言归正传,我们一起了解一下webpack运行基本原理,首先先明白几个核心概念,

  • Entry:入口,webpack构建的起始
  • Module:模块,webpack里面一切皆模块,也是代表着文件,从Entry配置的入口文件开始,递归找出依赖的模块
  • Chunk:代码块,找出递归依赖模块经转换后组合成代码块
  • Loader:模块转换器,也就是将模块的内容按照需求装换成新内容
  • Plugin:扩展插件,webpack构建过程中,会在特定的时机广播对应的事件,而插件可以监听这些事件的发生

流程

webpack构建流程,详细过程如下:

  • 初始化:从配置文件或是shell读取与合并参数,得到最终参数,实例化插件new Plugin()
  • 开始编译:通过上一步初始化得到的最终参数,初始化一个Compiler对象,加载插件(依次调用插件中的apply方法),通过执行Compiler.run开始编译
  • 确定入口:根据配置中entry找出所有入口文件
  • 编译模块:从entry出发,调用配置的loader,对模块进行转换,同时找出模块依赖的模块(如何找?见下文),依次递归,直到所有依赖模块完成本步骤处理
  • 完成模块编译:这一步已经使用loader对所有模块进行了转换,得到了转换后的新内容以及依赖关系
  • 输出资源: 根据入口与模块之间的依赖关系,组装成一个个chunk代码块,并且生成文件输出列表
  • 输出成功:根据配置中的输出路径和文件名,将文件写入文件系统,完成构建

事件

整个构建流程会发生很多的事件,来供Plugin监听,这些事件具体的可以分为三个阶段,分别是初始化阶段编译阶段输出阶段,那么具体有哪些事件,这里按阶段分别介绍,

初始化阶段

事件 作用
初始化 从配置文件或是shell读取与合并参数,得到最终参数,依次实例化插件new Plugin()
实例化Compiler 通过上一步初始化得到的最终参数,初始化一个Compiler对象,负责监听文件和启动编译,全局只有一个Compiler对象
加载插件 依次调用插件中的apply方法,同时也会将Compiler实例传入,就可以调用Webpack提供的api,Compiler实例可以说是就是Webpack的实例
environment 将node.js风格的文件系统应用到compiler对象,便可以直接通过compiler来对文件进行操作
entry-option 读取配置中的entry,依次实例化出对应EntryPlugin,为后面该entry的递归解析工作做准备
after-plugins 调完所有内置和配置的插件的apply方法
after-resolvers 根据配置初始化resolvers,resolvers负责在文件系统中寻找制定路径的文件

编译阶段

事件 作用
run 启动一次新的编译,调用Compiler.run()
watch-run 和run类似,区别在于它是在监听模式下进行编译的,这个事件可以获取哪些文件发生了变化从而导致新的一次编译
compile 告诉插件新的一次编译即将启动,并且给插件带上compiler对象
compilation 每当检测到文件的变化,都会有一次新的compilation被创建,一个compilation对象包含了当前的模块资源、编译生成的资源、变化的文件等等的属性和方法,同时记住,在很多事件的的回调中都会将compilation传入,以便使用
make 一个新的Compilation创建完毕,那么就会从entry配置中开始读取文件,使用配置好的loader对文件进行编译,编译完后再找出文件依赖的文件,递归地去编译和解析
after-compile 一次Compilation执行完成
invalid 文件编译错误等异常触发该事件,不会导致webpack退出

Compilation的事件

事件 作用
build-moudle 使用对应的loader去转换一个模块
normal-module-loader 在用loader转换一个模块后,会使用acorn解析转换后的内容输出对应的抽象语法树(ast),以便webpack后面分析代码使用
program 从配置的入口开始,分析生成的ast,遇到require等导入语句时,便会将其加入依赖模块列表,并且对找出的依赖进行递归分析,最终可以弄清所有依赖关系
seal 所有模块及其依赖的模块都通过Loader转换完成,根据依赖关系生成chunk

输出阶段

事件 作用
should-emit 所有需要输出的文件都生成,准备输出,询问哪些文件需要输出,哪些不需要输出
emit 确定好要输出哪些文件后,并执行文件输出,可以在这里获取和修改输出的内容
after-emit 文件输出完毕
done 完成一次完整的编译和输出流程
failed 编译和输出过程中运到异常,导致webpack退出,会直接到这个步骤,可以在这里获取具体原因

总结

Webpack是很好的前端资源加载和打包工具,在webpack里一切皆模块,很好地处理文件之间的依赖关系,这里我们介绍的是些理论性的知识,了解基本概念,知道整个流程是怎么样的,webpack是串行流水线运行的,工作期间会有很多广播事件,来供插件使用,这里我们介绍了各个阶段的事件以及作用,具体代码表示形式,后续文章会引入。