浅谈webpack和webpack-cli模块源码分析


Posted in Javascript onJanuary 19, 2020

webpack4与webpack3的区别

webpack4.0 以后,似乎执行方式就发生了改变,不再是 webpack 一波流,而是多了一个 webpack-cliwebpack3webpack-cli是合在webpack中。所以在命令行运行 webpack 命令的同时,会提示让你再装一个 webpack-cli

执行脚本到打包结束流程

1、当我们安装了webpack模块后,就会在node_modules/.bin目录下生成一个webpack、webpack.cmd,webpacklinux下的命令脚本,webpack.cmdwindows下命令脚本,webpack.cmd可以在windows系统上直接运行。

每当执行npm run,就会自动新建一个 Shell,在这个 Shell 里面执行指定的脚本命令。因此,只要是 Shell(一般是 Bash)可以运行的命令,就可以写在 npm 脚本里面。

比较特别的是,npm run新建的这个 Shell,会将当前目录的node_modules/.bin子目录加入PATH变量(软连接),执行结束后,再将PATH变量恢复原样。

这意味着,当前目录的node_modules/.bin子目录里面的所有脚本,都可以直接用脚本名调用,而不必加上路径。比如,当前项目的依赖里面有 Mocha,只要直接写mocha test就可以了。

执行一下命令
cd .\node_modules\.bin\

浅谈webpack和webpack-cli模块源码分析

2、package.jsonscript配置dev: webpack --mode development,当执行npm run dev相当于执行webpack --mode development

浅谈webpack和webpack-cli模块源码分析

webpack.cmd执行时会判断当前目录下是否存在node执行程序,如果存在就使用当前node进程执行node_modules/webpack/bin/webpack.js,如果当前目录下不存在node进程,则使用全局(也就是本地)node执行node_modules/webpack/bin/webpack.js文件

3、node_modules/webpack/bin/webpack.js首先会判断是否安装了webpack-cli模块,如果没有安装webpack-cli模块就会引导用户去安装,如果已经安装了webpack-cli模块,就会去执行node_modules\webpack-cli\bin\cli.js

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: "The original webpack full-featured CLI."
 },
 {
  // some coding
 }
];

const installedClis = CLIs.filter(cli => cli.installed);

if (installedClis.length === 0) {
 // some coding
 const question = `Do you want to install 'webpack-cli' (yes/no): `;
 // some coding
} else if (installedClis.length === 1) {
 const path = require("path");
 const pkgPath = require.resolve(`${installedClis[0].package}/package.json`);
 const pkg = 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() {
 // 一大堆配置
 // something code ...
 yargs.parse(process.argv.slice(2), (err, argv, output) => {
  // something code ...
  function processOptions(options) {
   // 各种if else 过滤和配置
   // something code...
   const webpack = require("webpack");
   let compiler;
   try {
    // 运行webpack函数,返回一个compiler对象
    compiler = webpack(options); 
   } catch (err) {
    // something code...
   }
   // 执行compiler中的run,开始编译。
   compiler.run(compilerCallback);
  }
  processOptions(options);
 })
 // something code ...

})()
// node_modules/webpack/lib/webpack.js
const webpack = (options, callback) => {
 // some coding
 return compiler;
}
exports = module.exports = webpack;

参考
npm 脚本的原理:https://3water.com/article/148443.htm
webpack-cli源码解析:https://www.jianshu.com/p/ec8e70d362ef

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
js实现网页随机验证码
Oct 19 Javascript
js原生map实现的方法总结
Jan 19 #Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 #Javascript
JS运算符简单用法示例
Jan 19 #Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 #Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 #Javascript
js实现图片上传到服务器和回显
Jan 19 #Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 #Javascript
You might like
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
很可爱的输入框
2008/08/03 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
js判断是否是手机页面
2017/03/17 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
python中reduce()函数的使用方法示例
2017/09/29 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
Nike瑞士官网:Nike CH
2021/01/18 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
责任担保书范文
2014/05/21 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
欢迎词范文
2015/01/27 职场文书
公司经营目标责任书
2015/01/29 职场文书
降价通知函
2015/04/23 职场文书
行政诉讼答辩状
2015/05/21 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
新党员入党决心书
2015/09/22 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android