浅谈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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
p5.js实现简单货车运动动画
Oct 23 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魔术方法__GET、__SET使用实例
2014/11/25 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
Python实现从订阅源下载图片的方法
2015/03/11 Python
Python中字符串的格式化方法小结
2016/05/03 Python
Python如何快速实现分布式任务
2017/07/06 Python
多个应用共存的Django配置方法
2018/05/30 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
python pandas库的安装和创建
2019/01/10 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
python如何进入交互模式
2020/07/06 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
在Python中实现字典反转案例
2020/12/05 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
Java的五个基础面试题
2016/02/26 面试题
客户答谢会活动方案
2014/08/31 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
初中班主任工作随笔
2015/08/15 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL