本文是webpack系列文章的第一篇。我希望我的一些学习也可以帮助其他人。webpack简介webpack是一个静态的模块化打包工具。现代JavaScript应用服务的打包bundler：webpack可以帮我们打包，所以是一个打包工具staticstatic：将代码打包成最终的静态资源（部署到静态服务器）modularmodule：webpack支持各种模块化开发，modernmodern如ESModule、CommonJS、AMD：前端开发的各种问题催生了webpack的出现来安装这两个东西。webpack是依赖打包代码的核心内容，webpack-cli是一个命令行运行webpack的工具。但是打包文件不需要webpack-cli，这是为什么呢？详解webpack-cli使用npmrunbuild命令分析webpack-cli在代码打包中的作用，wk.config.js是自定义的webpack配置文件"scripts":{"build":"webpack--configwk.config.js"}在命令行执行npmrunbuild时，会执行node_modules/.bin下的webpack可执行文件。这里一共有三个可执行文件，对应不同的平台。#unix系统默认的可执行文件，必须输入完整的文件名称webpack#windowscmd中默认的可执行文件webpack.cmd#WindowsPowerShell中的可执行文件可以跨平台webpack.ps1取webpack可执行文件的内容例如：#!/bin/shbasedir=$(dirname"$(echo"$0"|sed-e's,\\,/,g')")在*CYGWIN*|*MINGW*中使用`uname`|*MSYS*)basedir=`cygpath-w"$basedir"`;;esacif[-x"$basedir/node"];然后"$basedir/node""$basedir/../webpack/bin/webpack.js""$@"ret=$?elsenode"$basedir/../webpack/bin/webpack.js""$@"ret=$?fiexit$ret从代码中可以看出，它会执行node_modules/webpack/bin/目录下的webpack.js。文件主要代码如下：//该函数用于执行命令，例如下载需要的包construnCommand=(command,args)=>{}//判断包是否安装constisInstalled=packageName=>{}//该函数用于执行webpack-cli包bin目录下的cli.js文件construnCli=cli=>{constpath=require("path");常量pkgPath=要求。解决（`${cli.package}/package.json`）；//pkgPath:D:\webpack\node_modules\webpack-cli\package.jsonconstpkg=require(pkgPath);//pkg:webpack-cli配置在package.json//path.resolve(path.dirname(pkgPath),pkg.bin[cli.binName]):D:\webpack\node_modules\webpack-cli\bin\cli.jsrequire(path.resolve(path.dirname(pkgPath),pkg.bin[cli.binName]));}if(!cli.installed){//判断是否安装了webpack-cli//如果没有，询问是否安装webpack-cli......}else{runCli(cli);}这个文件最重要的功能是runCli，可以执行webpack-cli包bin目录下的cli.js文件，即也就是说，这之前的步骤只是为了找到cli.js文件。之后，webpack-cli就会发挥作用。同时webpack.js文件也做了一些辅助判断。首先检查你是否安装了webpack-cli。如果没有，会问你是否安装（或手动安装）这个包，如果你选择不安装，那么程序运行到这里就停止了。然后打开webpack-cli/bin/cli.js#!/usr/bin/envnode"usestrict";constimportLocal=require("import-local");construnCLI=require("../lib/bootstrap");if(!process.env.WEBPACK_CLI_SKIP_IMPORT_LOCAL){//首选`webpack-cli`的本地安装if(importLocal(__filename)){return;}}process.title="webpack";runCLI(process.argv);这个文件的主要功能是runCLI，runCLI来自bootstrap.js文件，打开bootstrap.js文件constWebpackCLI=require("./webpack-cli");construnCLI=async(args)=>{//创建CLI对象的新实例constcli=newWebpackCLI();尝试{awaitcli.run(args);}catch（错误）{cli.logger.error（错误）；进程.exit(2);}};module.exports=runCLI;注意，这里真正使用的是webpack-cli暴露的接口。cli.run(args)用于处理命令行参数。此时args参数为：['E:\\nodejs\\node.exe','D:\\webpack\\node_modules\\webpack\\bin\\webpack.js','--config','wk.config.js']最后，从上面的整个过程，我们可以知道webpack-cli是用来处理命令行参数的，通过参数结构构建编译器对象，然后是打包代码的过程。这样也解决了上面提出的问题，为什么文件打包不需要webpack-cli。由于webpack-cli只是处理命令行参数，我们也可以自己搭建cli来处理参数，比如lyx-cli。在第三方框架中，React和Vue（不使用Vite的版本）不使用webpack-cli。参考三面面试官：运行npmrunxxx时发生了什么？命令行界面(CLI)|webpack中文文档（docschina.org）
