第六章 通过源代码掌握webpack打包原理

59讲 webpack启动过程

开始： 从webpack命令行说起

通过npm scripts 运行webpack

• 开发环境：npm run dev
• 生产环境： npm run build

通过webpack直接运行

webpack entry.js bundle.js

这个过程发生了什么？

1. 查找webpack入口文件

       在命令行运行以上命令，npm会让命令行工具进入node_modules\.bin目录查找是否存在webpack.sh或者
    webpack.cmd文件，如果存在就执行，不存在就抛出错误。
        实际入口文件是： node_modules\webpack\bin\webpack.js
    
   

2.分析webpack的入口文件

3.启动后的结果

webpack最终找到webpack-cli(webpack-command)这个npm包，并且执行CLI

60讲 webpack-cli源码阅读

webpack-cli做的事情

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

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

NON_COMPILATION_ARGS的内容

webpack-cli使用args分析

webpack-cli执行的结果

webpack-cli对配置文件命令行参数进行转换最终生成配置选项参数options，最终会根据配置参数实例化webpack对象，然后执行构建流程。

参考

程柳锋 极客时间 《玩转webpack》 第六章 59-60讲