webpack源码之初始化参数

玉案轩窗

已于 2023-07-14 16:23:42 修改

阅读量402

点赞数

分类专栏：前端工程化相关文章标签： webpack 源码初始化参数

于 2019-12-07 16:46:46 首次发布

本文链接：https://blog.csdn.net/s1879046/article/details/103434211

版权

前端工程化相关专栏收录该内容

10 篇文章 3 订阅

订阅专栏

前言

webpack是目前最流行的前端构建工具，了解并熟悉它是必要的。2019年初定下了阅读Vue和Webpack的源码计划，Vue的源码阅读大致完成，前段时间稍微繁忙些，2019年最后一个月才开始着手阅读webpack的源码，初步完成年前的计划。
本系列文章的webpack版本是3.4.0。

流程逻辑

首先查看webpack源码目录下package.json文件，主要关注以下的点：

  "bin": {
    "webpack": "./bin/webpack.js"
  },
  "main": "lib/webpack.js",
  "name": "webpack"

本地webpack判断

	var localWebpack = require.resolve(path.join(process.cwd(), "node_modules", "webpack", "bin", "webpack.js"));
	if(__filename !== localWebpack) {
		return require(localWebpack);
	}

判断当前目录下node_module/webpack/bin/webpack.js是否与当前执行的webpack命令的文件地址是否一致。如果不一致就会返回当前目录下node_module/webpack/bin/webpack.js，保证本地webpack覆盖全局webpack。

yargs相关操作逻辑

yargs是Nodejs命令行工具，该模块就是用来解决如何处理命令行的参数的，lib/webpack.js文件涉及模块有相关参数有：

usage()：生成用法格式相关的帮助信息
help()：生成帮助信息
alias()：定义别名
options()：允许将所有的配置写入配置对象
argv对象：用来读取命令行参数

config-yargs.js文件主要暴露出函数用于处理相关命令行命令的支持，主要有：

module.exports = function(yargs) {
	yargs
		.help("help")
		.alias("help", "h")
		.version()
		.alias("version", "v")
		.options({
			// 相关参数名配置
			"config": {
				type: "string",
				describe: "Path to the config file",
				group: CONFIG_GROUP,
				defaultDescription: "webpack.config.js or webpackfile.js",
				requiresArg: true
			}
		})

定义-v、-h、–help，并定义相关webpack命令的参数，例如config参数：

webpack --config webpack.config.js

convert-argv.js文件主要是结合yargs.options转换命令行参数，生成最后的options选项对象即webpack所有配置项。

processOptions函数

processOptions函数主要的处理是判断相关参数是否存在并依据判断去赋值相关字段值，其中最核心的逻辑是：

var webpack = require("../lib/webpack.js");
try {
	compiler = webpack(options);
} catch(e) {
	// 相关报错处理
}
if(argv.progress) {
	var ProgressPlugin = require("../lib/ProgressPlugin");
	compiler.apply(new ProgressPlugin({
		profile: argv.profile
	}));
}
function compilerCallback(err, stats) {}

if(firstOptions.watch || options.watch) {
	var watchOptions = firstOptions.watchOptions || firstOptions.watch || options.watch || {};
	compiler.watch(watchOptions, compilerCallback);
	console.log("\nWebpack is watching the files…\n");
} else {
	compiler.run(compilerCallback);
}