webpack原理----编译过程

webpack4版本将webpack和webpack-cli分离，webpack是webpack核心包，通过webpack-cli命令行将其运行

根据入口文件，webpack将项目从入口文件src打包到dist文件的过程，称之为编译过程，该过程需在node环境下执行，因为在这里面涉及到许多读取文件的操作，浏览器环境下不能读取文件。

webpack编译过程分三步：

1. 初始化
2. 编译
3. 产生资源列表

1、初始化：该过程是将cli参数（例如：–config webpack.dist.config.js 配置文件路径）、配置文件（webpack.config.js）和默认配置（如：默认下入口文件为’./src/index.js’）进行融合，融合过程需使用第三方库yargs

2、编译：

编译的结果是形成一个这样的表格，上面记录着模块的id以及转换后的代码

1. 首先webpack根据入口文件去读取模块，每个模块的id是唯一的，即它们的路径’./src/index.js’，根据该id到表格中去对比，如果已经记录过该模块id，则结束，否则继续进行编译。
2. 读取模块文件，根据AST抽象语法树分析（树形结构遍历，找到所有的依赖，–> [’./src/modules/a.js’, ‘./src/modules/b.js’]），进而保存到dependencies当中。

	console.log("hello webpack")
	require("./modules/a");
	require("./modules/b");

3. 将依赖函数进行转换成webpack想要的样子

	console.log("hello webpack")
	require("./modules/a");	//--> __webpack_require('./src/modules/a')
	require("./modules/b"); //--> __webpack_require('./src/modules/b')

最终就是以一种键值对的形式进行保存，随后webpack会根据这样子记载的内容去加载这些模块。

3、产生chunk assets 资源列表
每个入口文件都会生成一个chunk，每个chunk里面有许多模块，每个模块都是通过入口模块分析依赖生成的。它会将编译中转换的代码以一种函数的形式进行转化。

webpack会为每个chunk文件生成一个chunk hash，最终将所有的chunk模块进行合并，生成一个总的chunk assets。

最后一步，输出：webpack将利用node中的js模块对总的assets进行读取，然后生成相应的文件。