假如面试官问你在终端执行 npm run build 之后webpack做了写什么？

随着 基于webpack，不使用任何脚手架，创建纯粹的webpack项目 的基础环境的过程搭建。结合笔者之前的 npm run dev 后 webpack-dev-server 做了哪些事情 可以了解到在vue-cli脚手架项目下 npm run dev 对应通过批处理文件调用 webpack-dev-server.cmd的过程。大概回顾一下：

①终端执行 npm run dev

②基于全局环境下的npm批处理，调用node进程，并且传递参数 run 和 dev

③node进程中调用 webpack-dev-server 并送给参数 --inline --progress --config build/webpack.dev.conf.js

这个过程是基于如下package.json配置的过程：

{
  "scripts":{
    "dev":"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  }
}

与上述流程相类似，对于npm run build 的package.json的配置，如下：

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "webpack原理",
  "main": "main.js",
  "scripts": {
    "build": "webpack --progress --config ./config/webpack.config.js"
  },
  "author": "askcomputer",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.74.0",
  }
}

vscode的调试环境launch.json配置如下：

{
    "configurations": [
        {
            "name": "launch-via-npm",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run build"
            "cwd": "${workspaceFolder}"
          },
    ]
}

因为当前是基于windows环境的演示，所以在左下角的搜索按钮中，查找“webpack”，如下：

打开后查看webpack.js的批处理内容，如下：

@ECHO off
GOTO start
:find_dp0
SET dp0=%~dp0
EXIT /b
:start
SETLOCAL
CALL :find_dp0

IF EXIST "%dp0%\node.exe" (
  SET "_prog=%dp0%\node.exe"
) ELSE (
  SET "_prog=node"
  SET PATHEXT=%PATHEXT:;.JS;=;%
)

endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\node_modules\webpack\bin\webpack.js" %*

笔者在之前的文章中介绍过 %~dbp0在windows中是指当前命令运行的目录。按照当前路径的相对路径找到webpack.js。webpack.js的内容如下：

#!/usr/bin/env node
const runCommand = (command, args) => {...};
const isInstalled = packageName => {...};
const runCli = cli => {...};
const cli = {
	name: "webpack-cli",
	package: "webpack-cli",
	binName: "webpack-cli",
	installed: isInstalled("webpack-cli"),
	url: "https://github.com/webpack/webpack-cli"
};

//判断webpack-cli是否安装
if (!cli.installed) {
	...
	const notify =
		"CLI for webpack must be installed.\n" + `  ${cli.name} (${cli.url})\n`;
	...
	console.error(
		`We will use "${packageManager}" to install the CLI via "${packageManager} ${installOptions.join(
			" "
		)} ${cli.package}".`
	);
	const question = `Do you want to install 'webpack-cli' (yes/no): `;
	...
	questionInterface.question(question, answer => {
		...
		const normalizedAnswer = answer.toLowerCase().startsWith("y");
		if (!normalizedAnswer) {
			console.error(
				"You need to install 'webpack-cli' to use webpack via CLI.\n" +
					"You can also install the CLI manually."
			);
			return;
		}
		...
		runCommand(packageManager, installOptions.concat(cli.package))
			.then(() => {
				runCli(cli);
			})
			.catch(error => {
				...
			});
	});
} else {
	//如果安装完webpack-cli之后直接运行
	runCli(cli);
}

从这一块代码中，可以看出使用 webpack 转换CommonJS模块化文件之前对于 webpack-cli 的环境判断。表现在DOS命令窗口中，如下：

实际上这儿的内容就是来自于webpack.js中的业务设计。

平时可能多数同学停留在打开终端，在项目根目录下，运行 npm run dev、npm run build 等等命令，但是当笔者把npm和webpack拆解出来以后，希望能够带来一种柳暗花明或者是恍然大悟的冲击。

下一篇笔者将继续深耕webpack对于css等模块的转换过程，进一步掌握webpack的Loader等内容。