webpack原理篇（五十二）：webpack-cli源码阅读

说明

玩转 webpack 学习笔记

webpack-cli 做的事情

1. 引入 yargs，对命令行进行定制
2. 分析命令行参数，对各个参数进行转换，组成编译配置项
3. 引用webpack，根据配置项进行编译和构建

从 NON_COMPILATION_CMD 分析出不需要编译的命令

webpack-cli 处理不需要经过编译的命令

const { NON_COMPILATION_ARGS } = require("./utils/constants");
const NON_COMPILATION_CMD = process.argv.find(arg => {
  if (arg === "serve") {
    global.process.argv = global.process.argv.filter(a => a !== "serve");
    process.argv = global.process.argv;
  }
    return NON_COMPILATION_ARGS.find(a => a === arg);
  });
  if (NON_COMPILATION_CMD) {
    return require("./utils/prompt-command")(NON_COMPILATION_CMD, ...process.argv);
  }
})

NON_COMPILATION_ARGS 的内容

webpack-cli 提供的不需要编译的命令

const NON_COMPILATION_ARGS = [
  "init", // 创建一份 webpack 配置文件
  "migrate", // 进行 webpack 版本迁移
  "add", // 往 webpack 配置文件中增加属性
  "remove", // 往 webpack 配置文件中删除属性
  "serve", // 运行 webpack-serve
  "generate-loader", // 生成 webpack loader 代码
  "generate-plugin", // 生成 webpack plugin 代码
  "info" // 返回与本地环境相关的一些信息
];

命令行工具包 yargs 介绍

• 提供命令和分组参数
• 动态生成 help 帮助信息

webpack-cli 使用 args 分析

参数分组 (​​config/config-args.js​​)，将命令划分为9类：

1. ​​Config options​​: 配置相关参数(文件名称、运行环境等)
2. ​​Basic options​​: 基础参数(entry设置、debug模式设置、watch监听设置、devtool设置)
3. ​​Module options​​: 模块参数，给 loader 设置扩展
4. ​​Output options​​: 输出参数(输出路径、输出文件名称)
5. ​​Advanced options​​: 高级用法(记录设置、缓存设置、监听频率、bail等)
6. ​​Resolving options​​: 解析参数(alias 和 解析的文件后缀设置)
7. ​​Optimizing options​​: 优化参数
8. ​​Stats options​​: 统计参数
9. ​​options​​: 通用参数(帮助命令、版本信息等)

通过 convert-argv 组装 options 参数

处理输出的 outputOptions，看 processOptions 函数

实例化 webpack ，将 options 传给 webpack

new 了一个内置的插件 ProgressPlugin，通过有没有 watch 参数去分别执行，最后执行 compilerCallback

webpack-cli 执行的结果

webpack-cli 对配置文件和命令行参数进行转换最终生成配置选项参数 options

最终会根据配置参数实例化 webpack 对象，然后执行构建流程