浅谈webpack和webpack-cli模块源码分析
webpack4与webpack3的区别
webpack4.0以后,似乎执行方式就发生了改变,不再是webpack一波流,而是多了一个webpack-cli。webpack3中webpack-cli是合在webpack中。所以在命令行运行webpack命令的同时,会提示让你再装一个webpack-cli。
执行脚本到打包结束流程
1、当我们安装了webpack模块后,就会在node_modules/.bin目录下生成一个webpack、webpack.cmd,webpack是linux下的命令脚本,webpack.cmd是windows下命令脚本,webpack.cmd可以在windows系统上直接运行。
每当执行npmrun,就会自动新建一个Shell,在这个Shell里面执行指定的脚本命令。因此,只要是Shell(一般是Bash)可以运行的命令,就可以写在npm脚本里面。
比较特别的是,npmrun新建的这个Shell,会将当前目录的node_modules/.bin子目录加入PATH变量(软连接),执行结束后,再将PATH变量恢复原样。
这意味着,当前目录的node_modules/.bin子目录里面的所有脚本,都可以直接用脚本名调用,而不必加上路径。比如,当前项目的依赖里面有Mocha,只要直接写mochatest就可以了。
执行一下命令 cd.\node_modules\.bin\
CLIs=[ { name:"webpack-cli", package:"webpack-cli", binName:"webpack-cli", alias:"cli", installed:isInstalled("webpack-cli"), recommended:true, url:"https://github.com/webpack/webpack-cli", description:"Theoriginalwebpackfull-featuredCLI." }, { //somecoding } ]; constinstalledClis=CLIs.filter(cli=>cli.installed); if(installedClis.length===0){ //somecoding constquestion=`Doyouwanttoinstall'webpack-cli'(yes/no):`; //somecoding }elseif(installedClis.length===1){ constpath=require("path"); constpkgPath=require.resolve(`${installedClis[0].package}/package.json`); constpkg=require(pkgPath); console.log(path.resolve( path.dirname(pkgPath), pkg.bin[installedClis[0].binName] ))//E:\项目\webpack学习\node_modules\webpack-cli\bin\cli.js require(path.resolve( path.dirname(pkgPath), pkg.bin[installedClis[0].binName] )); }
4、node_modules\webpack-cli\bin\cli.js中会require("webpack")引入webpack模块(/node_modules/lib/webpack.js)得到一个webpack函数,运行webpack函数,返回一个compiler对象,执行compiler中的run,开始编译
//node_modules/bin/cli.js (function(){ //一大堆配置 //somethingcode... yargs.parse(process.argv.slice(2),(err,argv,output)=>{ //somethingcode... functionprocessOptions(options){ //各种ifelse过滤和配置 //somethingcode... constwebpack=require("webpack"); letcompiler; try{ //运行webpack函数,返回一个compiler对象 compiler=webpack(options); }catch(err){ //somethingcode... } //执行compiler中的run,开始编译。 compiler.run(compilerCallback); } processOptions(options); }) //somethingcode... })()
//node_modules/webpack/lib/webpack.js constwebpack=(options,callback)=>{ //somecoding returncompiler; } exports=module.exports=webpack;
参考:
npm脚本的原理:https://www.nhooo.com/article/148443.htm
webpack-cli源码解析:https://www.jianshu.com/p/ec8e70d362ef
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。