webpack 源码解析-运行

日日自新
906 阅读3分钟

webpack 源码解析之运行

运行环境webpack 版本

{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^5.45.1",
    "webpack-cli": "^4.7.2"
  }
}

新建一个文件夹

执行 命令

yarn add webpack webpack-cli -D

在node_modules/webpack/bin/webpack.js中

image.png

接下来我们就来看一下运行webpack到底做了什么

1.前面都是定义函数 我们从87行开始 （不同版本代码略微不同）

image.png

定义一个cli 对象 在installed方法中 判断是否安装了webpack-cli isInstalled方法如下

image.png

判断我们如果安装了webpack-cli 把webpack-cli参数放入 查询路径 能查询到就返回true 否则返回false

判断webpack-cli 有没有安装

image.png

如果没有安装就会执行上面这段代码就log 一个error 的提示webpack-cli必须要安装，然后判断使用什么包管理工具 yarn 、 pnpm 、 npm 帮助提示安装

	const installOptions = [packageManager === "yarn" ? "add" : "install", "-D"];

	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): `;

	const questionInterface = readLine.createInterface({
		input: process.stdin,
		output: process.stderr
	});

然后给出提示 是否安装webpack-cli 提供一个readline 库 拿到用户的输入和输出 ，如果想要安装就会执行runCommend函数

image.png

在前提没有安装的情况下 帮助你执行runcommend命令来帮助你安装webpack-cli安装成功之后 接下来就会执行runCli（）函数

image.png

在runCommend函数中返回一个promise 最终都会执行runcli函数

image.png

定义的所有的cli相关变量 都在前面的cli对象中

const cli = {
	name: "webpack-cli",
	package: "webpack-cli",
	binName: "webpack-cli",
	installed: isInstalled("webpack-cli"),
	url: "https://github.com/webpack/webpack-cli"
};

  1. 首先我们先require path模块

  2. 接着定义一个常量 cli在前面定义的对象中那大炮package就是webpack-cli 拿到webpack-cli/package.json这个路径

  3. 定义一个pkgPath 在require 执行这个package.json

  4. 执行require(path.resolve找到package.json这个路径)，然后pkg.bin[cli.binName]就是我们找到webpack-cli中的package.json中的bin里面的‘webpack-cli’

image.png

执行的就是 ./bin/cli.js 这个文件

image.png

  1. 这个文件就是判断你当前运行的项目 包 是否安装如图上 有一个urils.packageExists这是webpack自己封装的一个函数在/lib/utils/package-exists.js 判断你是否有webpack 如果没有就提示你安装 prompInstallation 这个也是在utils导出的函数 大致和webpack 判断 webpack-cli一样 比如用什么yarn 还是npm 安装

  2. 安装成功之后就会执行runCLI函数 这个函数在utils/bootstrap.js中

image.png

这个函数先创建一个webpack cli对象 执行cli当中的run方法 首先我们先看一下webpackcli这个类

image.png

在new Webpackcli()中 先执行这个constructor这个方法，其中最重要的方法就是一开始在先导入一个webpack 本质上 导出的webpack就是一个函数 我们可以通过webpack（config, callback）

image.png

  • 调用我们的webpack函数 把我们的配置文件传进去

  • webpack有两个函数 config 和 callback 如果没有传callback 那我们的compiler将会调用.run方法执行 compiler.run((err, status) => {}), 如果我们传了callback 那么将会自动调用run方法，

  • config传入配置文件 包括我们项目package.json 中的 脚本命令 还有我们配置的 webpack.config.js，例如 webpack --config --watch --profile --env --json 将我们这些配置生成对应的配置文件

  • 最终 我们拿到的config.options 就是我们最终拿到的配置参数对象，接下来就是调用我们的run方法

image.png

run方法在webpack-cli 700行左右，这里面就是我们webpack里面的命令

image.png

然后 就是我们的makeCommend 和 makeOption ，makeOption 就是我们生成最终的配置文件， createCompiler

image.png

以上就是webpack 对命令进行合并

webpack-cli 就是对我们所有配置文件进行合并 vue-cli 和 react 并没用使用webpack-cli

所以我们可以自己手写编译过程 只需要webpack就可以打包 不需要使用webpack-cli

avatar
文章
阅读
粉丝