浅谈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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
javascript下高性能字符串连接StringBuffer类
Aug 16 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 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 GD 图像处理组件的常用函数总结
2010/04/28 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
python对json的相关操作实例详解
2017/01/04 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
利用python汇总统计多张Excel
2020/09/22 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
史上最全面的Java面试题汇总!
2015/02/03 面试题
秋季运动会通讯稿
2014/01/24 职场文书
无传销社区工作方案
2014/05/13 职场文书
医学生求职自荐书
2014/06/12 职场文书
保研专家推荐信范文
2015/03/25 职场文书
投诉信范文
2015/07/02 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python
Fluentd搭建日志收集服务
2022/09/23 Servers