webpack-cli 只是处理参数,且执行webpack命令
-
npm install webapck webpack-cli --save-dev
-
"scripts": { "build": "webpack --config wk.config.js" }
-
当在命令行中执行
npm run build
时,会执行node_modules/.bin
下的webpack可执行文件 -
我们看下上面webpack文件的内容
-
从代码中可以看到,会执行node_modules/webpack/bin/ 目录下的webpack.js,该文件主要代码如下:
-
该文件最重要的函数就是 runCli ,该函数可以执行 webpack-cli 包中bin目录下的cli.js 文件,也就是说在此之前的步骤只是为了找到cli.js文件,在此之后,webpack-cli 才发挥作用。
-
同时,webpack.js 文件也做了一些辅助判断,首先查看你是否安装了webpack-cli,如果没有安装,就会询问你是否安装(或手动安装)该包,如果选择不安装,那么程序运行到这就停止了。
-
接着打开
webpack-cli/bin/cli.js
-
该文件的主要函数为 runCLI,而 runCLI 又来自 bootstrap.js 文件,打开 bootstrap.js 文件
-
new WebpackCLI(),然后继续调用实例的run方法
-
在constructor内,获取了webpack包的函数库
-
注意,到了这里才真正用到了 webpack-cli 暴露出的接口,cli.run(args) 用来处理命令行参数,此时args参数为:
-
最终,从以上整个过程,我们可以知道 webpack-cli 是用来处理命令行参数,并通过参数构建 compiler 对象,然后才是对代码进行打包的过程。
-
所以说,webpack-cli对于文件打包不是必需的。
-
既然 webpack-cli只是为了处理命令行参数,那我们同样可以构建自己的cli来处理参数,比如 lyx-cli。在第三方框架中,React 和 Vue(未使用Vite的版本)也没有使用 webpack-cli.
-
自己写代码替换webpack-cli,咱们在webpack源码下做实验
-
zanlan/src/utils/math.js
-
zanlan/src/main.js
-
zanlan/build.js
-
zanlan/webpack.config.js
-
执行
node zanlan/build.js
,可以看到在zanlan文件夹下生成了build文件夹,在内部有bundle.js,bundle.js.map
两个文件。 -
webpack启动流程图