《二十四》运行 webpack 命令的启动流程

原创

已于 2025-02-17 14:21:25 修改 · 459 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Webpack

于 2023-11-06 22:05:29 首次发布

文章详细描述了运行npxwebpack命令时WebpackCLI如何初始化、检查是否安装、合并命令参数和配置文件的过程，以及在不同版本和操作系统中的文件路径。同时指出，不依赖WebpackCLI的场景和手动使用Webpack打包的示例。

运行 npx webpack 命令进行打包，会去当前项目的 node_module/.bin 目录下查找 webpack.js 文件进行执行。
在 webpack.js 文件中：首先会去判断是否有安装 Webpack CLI，如果没有安装的话，会在命令行中给出提示并引导安装；一直判断到安装了 Webpack CLI之后，就会去导入并执行 webpack-cli/bin/cli.js 文件。
在 webpack-cli/bin/cli.js 文件及其导入的文件中：会创建 WebpackCLI 的实例对象，并执行其 run() 方法进行编译打包。
在 WebpackCLI 类中，做的最重要的一步就是会把打包命令中的参数和配置文件中的配置进行合并，然后把合并后的配置信息作为第一个参数传递给引入的 webpack 函数，就会生成编译器 compiler，就可以利用这个编译器去编译了。

总结来说，执行 npx webpack 时，会先去执行 Webpack CLI，目的就是为了把打包命令中的参数和配置文件中的配置进行合并；然后再真正执行 Webpoack。

不同的版本可能会略有差异，此处是 webpack5.88.2 和 webpack-cli5.1.4。
mac 和 windows 中文件的位置不同，此处是 mac 中的文件路径。

在这里插入图片描述

运行 webpack 命令的详细启动流程：

运行 npx webpack 命令进行打包，会去当前项目的 node_module/.bin 目录下查找本地安装的 webpack 进行执行。
请添加图片描述

// node_module/.bin/webpack.js
#!/usr/bin/env node

// 安装 webpack-cli
const runCommand = (command, args) => {
	const cp = require("child_process");
	return new Promise((resolve, reject) => {
		const executedCommand = cp.spawn(command, args, {
			stdio: "inherit",
			shell: true
		});

		executedCommand.on("er