【无标题】 - 技术栈

什么是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方法开始执行编译。

确定入口：从配置的entry入口，开始解析文件并构建AST语法树，找出依赖，递归下去。

编译模块：递归中根据文件类型和loader配置，调用所有配置的loader对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了编译处理。

完成模块编译：在经过使用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）