当前位置: 首页 > Web前端 > JavaScript

webpack流程分析(一):小哥先帮我看看对不对webpack-cli

时间:2023-03-26 22:38:03 JavaScript

前言编译器对象是一个全局单例,负责控制整个webpack打包构建过程。本文将介绍webpack在新的编译器之前做了什么启动webpack一般情况下,我们使用如下方式启动webpack//package.jsonscript:{"start":"webpack"}webpack/bin运行npmrunstart后,会先进入webpack/bin,webpack通过isInstalled("webpack-cli")判断cli是否安装。如果没有安装,它会使用yarn或者npm来帮你安装。最后,它将转到runCli方法。核心代码只是一个require(path.resolve(path.dirname(pkgPath),pkg.bin[cli.binName]));在这里阅读webpack-cli/bin/cli.js。webpack-cli/binwebpack-cli/bin/cli.js其实要判断是否安装了webpack(上面没有判断),如果没有安装,那就给你安装,然后实例化一个webpack-cli对象,执行run方法的实例。我不会在这里详细介绍代码。其实它做了两件事:获取process.args的参数,对参数进行校验合并,根据args的值在webpack的config中添加对应的plugin,最后获取参数并调用webpack。这里使用了两个包来提高运行效率,一个是import-local,用于优先使用本地文件,另一个是v8-compile-cache,用于优化v8的编译缓存。这两个我们以后再说。回到webpack回到webpack之后,我们就要开始创建编译器实例了。在此之前,其实会有一点点分支逻辑需要处理。如果参数是数组,则创建MultiCompiler实例,否则为CreateaninstanceofCompiler。参数验证和复制默认值一切都完成后,就该开始创建编译器对象了。结论在创建编译器对象之前,webpack不会做太多事情。简单来说,一句话,准备好参数。同时,还有一些性能优化的方法,不在本系列的讨论范围内,以后有时间再分享给大家