浅谈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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。