webpack和webpack-cli的差异
webpack做js的打包工作,webpack-cli解析webpack命令,命令内部使用webpack的功能;
webpack-cli做了哪些事情
- 引入yargs,对命令行进行定制,args提供命令和分组参数
- 分析命令行参数,对各个参数进行转换,形成编译配置项
- 引用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 对象,然后才是对代码进行打包的过程。