webpck深入浅出教程（三）webpack源码分析

webpack入口文件：

执行npm命令后，查看node_modules\.bin目录下是否存在webpack.sh或者webpack.cmd文件，如果存在就执行，如果不存在就抛出错误。

webpack实际入口文件是：

node_modules\webpack\bin\webpack.js

一、分析入口文件webpack.js

#!/usr/bin/env node

// @ts-ignore
process.exitCode = 0;//1、状态码

const runCommand = (command, args) => {};//2、运行某个命令

const isInstalled = packageName => {};//3、判断是否安装某个包


const CLIs = ["webpack-cli"，"webpack-command"]//webpack的cli工具webpack-cli或者webpack-command
	
const installedClis = CLIs.filter(cli => cli.installed);//过滤两个cli工具是否安装

if (installedClis.length === 0) {//根据安装的cli数量处理
	
} else if (installedClis.length === 1) {
	
} else {
	process.exitCode = 1;
}

二、进入webpack-cli（或者webpack-command处理）

webpack-cli/bin/cli.js文件分析，其实就是执行webpack-cli

1、解析命令，看命令是否需要经过编译，如果是NON_COMPILATION_CMD数组中的以下命令

const NON_COMPILATION_ARGS = ["init", "migrate", "serve", "generate-loader", "generate-plugin", "info"];

判断是否有serve，并做处理后return返回

const NON_COMPILATION_CMD = process.argv.find(arg => {
		if (arg === "serve") {
			global.process.argv = global.process.argv.filter(a => a !== "serve");
			process.argv = global.process.argv;
		}
		return NON_COMPILATION_ARGS.find(a => a === arg);
	});

如果不是NON_COMPILATION_CMD数组中的这些命令则引入yargs，对命令行定制处理

2、分析命令行参数及webpack配置文件中的参数，对各个参数做转换，组成webpack编译需要的配置项

3、进入webpack，根据options配置项编译和构建

processOptions的过程中，判断命令行中的参数和配置文件的参数，对outputOptions增加对应的option。

处理完options后，将参数传给webpack对象，并实例化生成全局的编译对象compiler = webpack(options);

三、进入webpack/lib/webpack.js

1、如果传入options是个数组，递归执行，否则就调用WebpackOptionsDefaulter.js中的process对options处理

2、接着实例化compiler对象，并执行环境相关的hooks，最后WebpackOptionsApply调用根据options.target类型设置webpack对应的默认插件。

3、最后执行compiler的