什么是webpack
webpack是一个模块打包器。通过使用webpack,我们可以将JavaScript文件打包在一起,打包后的文件可以在浏览器中使用
webpack的原理是什么
webpack读取相关配置,根据入口开始便利文件,解析依赖,使用loader处理各个模块,然后将文件打包成bundle后输出到output指定的目录中。
entry:一个可执行模块或者库的入口。
chunk: 多个文件组成一个代码块。可以将可执行的模块和他所依赖的模块组成一个chunk,这是打包。
loader:文件转换器。例如把es6转化为es5,scss转为css等。
plugin: 拓展webpack功能的插件。在webpack构建的生命周期节点上加入扩展hook,添加功能。
output:编译结果文件的输出位置
webpack的构建流程
Webpack的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:
1.参数初始化: 解析webpack配置参数,其中包含了shell传入的参数和webpack.config.js文件配置的参数,将其合并得到最终的配置结果。
2.开始编译:在上一步的参数初始化compiler对象,注册所有配置的插件,插件监听webpack构建生命周期的事件节点,做出相应的反应,执行对象的run方法开始执行编译。
3. 确定入口:从配置的entry入口,开始解析文件并构建AST语法树,找出依赖,递归下去。
4. 编译模块:递归中根据文件类型和loader配置,调用所有配置的loader对文件进行转换,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了编译处理。
5. 完成模块编译:在经过使用Loader翻译完成所有模块之后,得到了每个模块被翻译后的最终内容以及他们之间的依赖关系。
6.输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的Chunk,再把每个Chunk转换成一个单独的文件加入到输出列表,这一步是可以修改输出内容的最后内容。
7.输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把内容写入到文件系统。
Chunk是什么
Chunk在webpack中代指一个代码块或数据块,是webpack在打包过程中,一个模块或一组模块的集合。可以分为两种:
1.非初始化的
例如在打包中,对于一些动态导入的异步代码,webpack会帮我们分割出公用的代码,可以是自己的代码,也可以是第三方库(node_modules文件夹里的)这些被分割的代码文件我们可以理解为chunk
2.初始化的
我们在使用webpack进行打包的时候是从一个入口文件开始的,这构成了一连串模块引用关系。webpack通过引用关系逐个打包模块,这些模块(module)经过编译在编译过程中就初步形成了一个Chunk。
如果我们有多个入口文件,可能会产生多个打包路径,一条打包路径就会形成一个Chunk。
model是什么
model即不同文件类型的模块。webpack就是对模块进行打包的工具,这些模块各式各样,如js模块,css模块,sass模块,vue模块等等。这些模块文件都可以通过loader转换为对webpack有效的代码模块,然后被应用所使用并添加到依赖图中。
Bundle是什么
Bundle是webpack打包后输出的一个或多个最终的打包文件。大多数情况下,一个Chunk产生一个Bundle,但有时候并不是一对一的关系
1.Chunk是开发阶段的概念,在编译过程中生成。代表一组有依赖关系的模块。
2.Bundle是生产阶段的概念,有Webpack对Chunk进行进一步处理和优化后生成的最终的输出文件
3.Chunk的划分是自动进行的,Webpack根据模块之间的依赖关系和其他配置信息来生成Chunk,而Bundle则需要显式指定入口点。
4.在使用代码分割(code splitting)功能时,webpack可以将一个大的Chunk分割乘多个小的Chunk,从而实现按需加载(lazy loading).最终打包生成的Bundle也会相应的被拆分为多个文件,每个文件对应一个Chunk
产生Chunk的三个途径
1.entry入口
2.异步加载模块
3.代码分割(code spliting)