webpack-cli

71 阅读1分钟

webpack和webpack-cli的差异

webpack做js的打包工作,webpack-cli解析webpack命令,命令内部使用webpack的功能;

webpack-cli做了哪些事情

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

webpack-cli使用args分析

参数分组 (config/config-args.js),将命令划分为9类:

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

webpack-cli 执行的结果

webpack-cli对配置文件和命令行参数进行转换最终生成配置选项参数options,最终会根据配置参数实例化 webpack 对象,然后执行构建流程。webpack-cli 是用来处理命令行参数,并通过参数构建 compiler 对象,然后才是对代码进行打包的过程。