webpack构建流程
webpack
构建流程是一个串行的过程,从启动到结束会依次执行以下流程:
1.初始化参数:从配置文件和shell
参数中读取与合并参数,得出最终参数。
2.开始编译:根据参数初始化compiler
对象,加载所有配置的插件,执行对象的run
方法开始执行编译。
3.确定入口:根据配置中的entry
找出所有的入口文件。
4.编译模块:从入口文件出发,调用所有配置的loader
对模块进行翻译,再找出该模块依赖的模块,递归本步骤直至所有入口依赖的文件都经过了本步骤的处理。
5.完成模块编译:在经过上一步使用loader
翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系。
6.输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的chunk
,再把每个chunk
转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会。
7.输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。
在以上过程中,webpack
会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用webpack
提供的api
改变webpack
的运行结果。
编写loader和plugin的思路
loader
像一个翻译官,把读到的源文件内容转译成新的文件内容,并且每个loader
通过链式操作,将源文件一步步翻译成想要的样子。
编译loader
时要遵循单一原则,每个loader
只做一种转译工作,每个loader
拿到的是源文件内容(source
),可以通过返回值的方式将处理后的内容输出,也可以调用this.callback()
方法,将内容返回给webpack
。还可以通过this.async()
生成一个callback
函数,再用这个callback
函数将处理后的内容输出出去。此外webpack
还为开发者准备了开发loader
的工具集(loader-utils
)。
相对于loader
而言,plugin
的编写就灵活了很多。webpack
在运行的生命周期中会广播出许多事件,plugin
可以监听这些事件,在合适的时机通过webpack
提供的api
改变输出结果。
loader和plugin的不同
作用不同:
loader
直译为加载器,webpack
将一切文件视为模块,但是webpack
原生只能解析js
文件,如果想将其它文件也打包的话,就要用到loader
。所以loader
的作用是让webpack
拥有了加载和解析非js
文件的能力。
plugin
直译为插件,plugin
可以扩展webpack
的功能,让webpack
具有更多的灵活性。在webpack
运行的生命周期中会广播出许多的事件,plugin
可以监听这些事件,在合适的时机通过webpack
提供的api
改变输出结果。
用法不同:
loader
在module.rules
中配置,也就是说它作为模块的解析规则而存在。类型为数组,每一项都是一个object
,里面描述了对于什么类型的文件(test
),使用什么加载(loader
)和使用的参数(options
)
plugin
在plugins
中单独配置。类型为数组,每一项是一个plugin
的实例,参数都是通过构造函数传入。
常见的loader和plugin
file-loader
:把文件输出到一个文件夹中,在代码中通过相对URL
对引用输出的文件。
url-loader
:和file-loader
类似,但是能在文件很小的情况下以base64
的方式把文件内容注入到代码中去。
source-map-loader
:加载额外的source map
文件,以方便断点调试。
image-loader
:加载并且压缩图片文件。
babel-loader
:把es6
转换成es5
。
css-loader
:加载css
,支持模块化、压缩、文件导入等特性。
style-loader
:把css
代码注入到js
中去,通过DOM
操作去加载css
。
eslint-loader
:通过eslint
检查js
代码。
define-plugin
:定义环境变量。
commons-chunk-plugin
:提取公共代码。
uglifyjs-webpack-plugin
:通过uglifyes
压缩es6
代码。