webpack和webpack-cli的关系

webpack-cli 只是处理参数，且执行webpack命令

1. npm install webapck webpack-cli --save-dev

2. "scripts": { "build": "webpack --config wk.config.js" }

3. 当在命令行中执行 npm run build 时，会执行node_modules/.bin下的webpack可执行文件

4. 我们看下上面webpack文件的内容

5. 从代码中可以看到，会执行node_modules/webpack/bin/ 目录下的webpack.js，该文件主要代码如下：

6. 该文件最重要的函数就是 runCli ，该函数可以执行 webpack-cli 包中bin目录下的cli.js 文件，也就是说在此之前的步骤只是为了找到cli.js文件，在此之后，webpack-cli 才发挥作用。

7. 同时，webpack.js 文件也做了一些辅助判断，首先查看你是否安装了webpack-cli，如果没有安装，就会询问你是否安装（或手动安装）该包，如果选择不安装，那么程序运行到这就停止了。

8. 接着打开webpack-cli/bin/cli.js

9. 该文件的主要函数为 runCLI，而 runCLI 又来自 bootstrap.js 文件，打开 bootstrap.js 文件

10. new WebpackCLI()，然后继续调用实例的run方法

11. 在constructor内，获取了webpack包的函数库

12. 注意，到了这里才真正用到了 webpack-cli 暴露出的接口，cli.run(args) 用来处理命令行参数，此时args参数为：

13. 最终，从以上整个过程，我们可以知道 webpack-cli 是用来处理命令行参数，并通过参数构建 compiler 对象，然后才是对代码进行打包的过程。

14. 所以说，webpack-cli对于文件打包不是必需的。

15. 既然 webpack-cli只是为了处理命令行参数，那我们同样可以构建自己的cli来处理参数，比如 lyx-cli。在第三方框架中，React 和 Vue(未使用Vite的版本)也没有使用 webpack-cli.

16. 自己写代码替换webpack-cli，咱们在webpack源码下做实验

17. zanlan/src/utils/math.js

18. zanlan/src/main.js

19. zanlan/build.js

20. zanlan/webpack.config.js

21. 执行node zanlan/build.js，可以看到在zanlan文件夹下生成了build文件夹，在内部有bundle.js，bundle.js.map两个文件。

22. webpack启动流程图

这篇好文章是转载于：学新通技术网