.3-浅析webpack源码之预编译总览
写在前面:
本来一开始想沿用之前vue源码的标题:webpack源码之***,但是这个工具比较巨大,所以为防止有人觉得我装逼跑来喷我(或者随时鸽),加上浅析二字,以示怂。
既然是浅析,那么案例就不必太复杂,所以继续按照之前vue源码,以最简单形式进行源码分析,如下:
配置文件config.js:
module.exports={
entry:'./entry.js',
output:{
filename:'output'
}
}
入口文件entry.js:
console.log('entry');
执行命令为:
node webpack --config config.js
不摸鱼了,开始正式进入源码,惯例上图:
之前简单讲解了webpack.cmd的内容,可以发现在正常进行webpack打包之前,会调用bin文件夹的webpack.js文件,这一节就看一下这个文件做了什么,经过简单整理,源码如下:
var path = require("path"); // 优先使用当前路径版本的webpack.js
try {
var localWebpack = require.resolve(path.join(process.cwd(), "node_modules", "webpack", "bin", "webpack.js"));
if(__filename !== localWebpack) {
return require(localWebpack);
}
} catch(e) {} // 引入yargs框架
var yargs = require("yargs")
.usage("字符串..."); // 配置
require("./config-yargs")(yargs); var DISPLAY_GROUP = "Stats options:";
var BASIC_GROUP = "Basic options:"; yargs.options({
"json": {
type: "boolean",
alias: "j",
describe: "Prints the result as JSON."
},
// ...
// 各种配置...
}); // 解析命令行参数并执行回调函数
// 正常情况下err为null output为空字符
yargs.parse(process.argv.slice(2), (err, argv, output) => {
// 报错信息
if(err && output) {
// ...
} // 输出帮助或版本信息
if(output) {
// ...
} // 这里对配置文件进行转换与合法性检测
var options = require("./convert-argv")(yargs, argv); // argv的参数二次处理
// 暂时无视
function ifArg(name, fn, init) {
// ...
} // 解析配置文件
function processOptions(options) {
// 当前配置文件是一个Promise时
if(typeof options.then === "function") {
options.then(processOptions).catch(function(err) {
console.error(err.stack || err);
process.exit(1); // eslint-disable-line
});
return;
} // 大量的ifArg(...) // 获取webpack主函数
var webpack = require("../lib/webpack.js"); Error.stackTraceLimit = 30;
var lastHash = null;
var compiler;
try {
// 编译
compiler = webpack(options);
} catch(err) {
// error
} // ...编译后回调 暂时不管
} // 执行上面的函数
processOptions(options);
});
源码说长也不长,可以分为五大块:
1、引入yargs框架并进行配置
2、使用yargs解析命令并调用回调函数
3、进行配置文件参数转换与合法性检测
4、引入webpack主函数进行编译
5、编译完成后调用对应的回调函数
其中yargs框架是一个命令行框架,具体内容请自行查阅,这里不会做更多介绍,因此源码内容会按顺序跳着讲。
首先是一个小try/catch语句:
// Local version replace global one
try {
var localWebpack = require.resolve(path.join(process.cwd(), "node_modules", "webpack", "bin", "webpack.js"));
if(__filename !== localWebpack) {
return require(localWebpack);
}
} catch(e) {}
其实注释已经讲明了这个代码块的作用,这里稍微详细再说几点。
process是node中的一个全局对象,而process.cwd()方法可以获取到当前进程的绝对路径,测试如图:
所以第一行赋值语句会尝试获取./node_modules/webpack/bin/webpack,js文件并进行调用,将结果赋给localWebpack。
而__filename是当前指令文件的详细绝对路径,在默认的node webpack *指令中,一般情况我们都会配置环境变量,所以这个webpack指向全局的webpack,而__filename也是全局的webpack.js路径。
因此,if判断就是优先使用当前路径的webpack.js,如果不存在,就使用全局的webpack来进行编译解析。
接下来的几块内容全是yargs的配置,这里就不细看了,直接进入yargs.parse函数:
yargs.parse(process.argv.slice(2), (err, argv, output) => {
// ...
})
前面提到过process是node的全局对象,argv是它的一个属性,主要处理命令参数,可以简单打印看一下内容:
在什么也不做的时候,会返回一个数组,其中第一个元素默认为node.exe路径。
这里创建一个JS专门打印process.argv:
// entry.js
console.log(process.argv);
然后执行下列命令:
node entry 1 2 3
结果如图:
可以看到,传入命令的参数是从第三个开始依次展开,所以yargs.parse的第一个参数排除了argv数组的前两个,只传命令参数。
yargs的parse方法会负责收集并管理参数,在执行成功后会调用后面的函数,回调函数有三个参数,分别为:
1、err => 解析过程中的错误信息
2、argv => 参数管理对象
3、output => 输出到终端的文本
如果正常解析,err为null,而output为空字符。
这里可以观察一下argv的内容,在源码中打印结果如图:
这只是一部分属性的截图,对象中的第一个_保存了传进来的参数,由于直接运行的node webpack --config *,后面没有带参数,所以这里是个空数组。
而其余大量的属性都是在之前配置中添加的,比如说前面的4个:help、h、version、v,来自于config-yarg.js文件,源码如下:
module.exports = function(yargs) {
yargs
.help("help")
.alias("help", "h")
.version()
.alias("version", "v")
.options(
// 更多配置...
)
}
这个配置不是关心的重点,暂时没必要去看。
接下来是convert-argv函数,负责对配置对象转换并返回:
var options = require("./convert-argv")(yargs, argv);
这个函数有点长,下一节再来讲解。
.3-浅析webpack源码之预编译总览的更多相关文章
- .9-浅析webpack源码之NodeEnvironmentPlugin模块总览
介绍Compiler的构造比较无趣,不如先过后面的,在用到compiler的时候再做讲解. 这一节主要讲这行代码: // 不管这里 compiler = new Compiler(); compile ...
- .12-浅析webpack源码之NodeWatchFileSystem模块总览
剩下一个watch模块,这个模块比较深,先大概过一下整体涉及内容再分部讲解. 流程图如下: NodeWatchFileSystem const Watchpack = require("wa ...
- .17-浅析webpack源码之compile流程-入口函数run
本节流程如图: 现在正式进入打包流程,起步方法为run: Compiler.prototype.run = (callback) => { const startTime = Date.now( ...
- Spring Boot 2.0系列文章(五):Spring Boot 2.0 项目源码结构预览
关注我 转载请务必注明原创地址为:http://www.54tianzhisheng.cn/2018/04/15/springboot2_code/ 项目结构 结构分析: Spring-boot-pr ...
- 从Webpack源码探究打包流程,萌新也能看懂~
简介 上一篇讲述了如何理解tapable这个钩子机制,因为这个是webpack程序的灵魂.虽然钩子机制很灵活,而然却变成了我们读懂webpack道路上的阻碍.每当webpack运行起来的时候,我的心态 ...
- Android之源码之模块编译和调试
Android之源码之模块编译调试 (一) 进行源码模块修改进行编译的调试 1.首先是从git或者svn上拉一套完整的工程下来,然后全编一下,一般这个时间比较长,大概会得2,3个小时左右, 2,编译成 ...
- 【原创】从零开始学SpagoBI5.X源码汉化编译
从零开始学SpagoBI5.X源码汉化编译 一.新建Tomact Server 服务器并配置测试1.文件-新建-其他-过滤server-服务类型选择Tomact V7.0 Server2.根据需要修改 ...
- .30-浅析webpack源码之doResolve事件流(1)
这里所有的插件都对应着一个小功能,画个图整理下目前流程: 上节是从ParsePlugin中出来,对'./input.js'入口文件的路径做了处理,返回如下: ParsePlugin.prototype ...
- 51ak带你看MYSQL5.7源码2:编译现有的代码
从事DBA工作多年 MYSQL源码也是头一次接触 尝试记录下自己看MYSQL5.7源码的历程 目录: 51ak带你看MYSQL5.7源码1:main入口函数 51ak带你看MYSQL5.7源码2:编译 ...
随机推荐
- Oracle EBS使用adpatch工具打patch过程(hotpatch mode)
目录(?)[-] 从Metalink下载补丁 上传解压 使用adpatch来打patch完整的日志 检查patch是否打成功 adpatch的日志文件 补充关于Oracle EBS Patch的类型 ...
- .net MVC, webAPI,webForm集成steeltoe+springcloud实现调用服务中心服务的总结
开始之前,如果没接触过Autofac的,可以移步到Autofac官方示例学习一下怎么使用:https://github.com/autofac/Examples .net 下集成steeltoe进行微 ...
- wpf Listbox 实现按住ctrl键来取消选中
1. 首先继承一个listbox,来获得按住ctrl键时,点击的item public class ListBoxEx : ListBox { public BeatTemplateWave GetA ...
- react项目开发中遇到的问题
前言 作为一个前端爱好者来说,都想在react上一试生手,那么在搭建react项目开发时,肯定会有这样或者那样的问题,尤其是对初学者来说,下面就个人在开发过程中遇到的问题总结一下,好在有google帮 ...
- 获取当前人IP地址
/*** 获取访问的IP地址* @date 2018年11月26日上午11:31:49* @user : taoshao* @param request* @return*/public String ...
- JSOI2010 缓存交换
题目链接:戳我 考虑一个贪心--就是每次我们都选择队列里面之后最晚加入的元素弹出. 维护一个nxt数组就行了. 特判一下之后不会再加入的元素. 代码如下: #include<iostream&g ...
- raspberry pi wifi
vim /etc/network/interfaces 修改 wpa-ssid 和 wpa-psk
- Linux - 更改软件源
镜像源 网易镜像源 在网易开源镜像页面,点击对应镜像名的使用帮助,可以查看到更新源的方法,按步骤操作即可. 阿里云镜像源 在阿里云开源镜像页面,点击对应Mirror分类的help标签,可以查看到更新源 ...
- java爬虫学习
一.java爬取数据 示例:爬取网站中的所有古风网名:http://www.oicq88.com/gufeng/,并储存入数据库(mysql) jdk版本:jdk1.8 编辑器:idea 项目构建:m ...
- flask中邮件发送方法
from flask import Flask from flask_mail import Mail, Message app = Flask(__name__) #配置邮件:服务器/端口/传输层安 ...