写在前面:

  本来一开始想沿用之前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源码之预编译总览的更多相关文章

  1. .9-浅析webpack源码之NodeEnvironmentPlugin模块总览

    介绍Compiler的构造比较无趣,不如先过后面的,在用到compiler的时候再做讲解. 这一节主要讲这行代码: // 不管这里 compiler = new Compiler(); compile ...

  2. .12-浅析webpack源码之NodeWatchFileSystem模块总览

    剩下一个watch模块,这个模块比较深,先大概过一下整体涉及内容再分部讲解. 流程图如下: NodeWatchFileSystem const Watchpack = require("wa ...

  3. .17-浅析webpack源码之compile流程-入口函数run

    本节流程如图: 现在正式进入打包流程,起步方法为run: Compiler.prototype.run = (callback) => { const startTime = Date.now( ...

  4. Spring Boot 2.0系列文章(五):Spring Boot 2.0 项目源码结构预览

    关注我 转载请务必注明原创地址为:http://www.54tianzhisheng.cn/2018/04/15/springboot2_code/ 项目结构 结构分析: Spring-boot-pr ...

  5. 从Webpack源码探究打包流程,萌新也能看懂~

    简介 上一篇讲述了如何理解tapable这个钩子机制,因为这个是webpack程序的灵魂.虽然钩子机制很灵活,而然却变成了我们读懂webpack道路上的阻碍.每当webpack运行起来的时候,我的心态 ...

  6. Android之源码之模块编译和调试

    Android之源码之模块编译调试 (一) 进行源码模块修改进行编译的调试 1.首先是从git或者svn上拉一套完整的工程下来,然后全编一下,一般这个时间比较长,大概会得2,3个小时左右, 2,编译成 ...

  7. 【原创】从零开始学SpagoBI5.X源码汉化编译

    从零开始学SpagoBI5.X源码汉化编译 一.新建Tomact Server 服务器并配置测试1.文件-新建-其他-过滤server-服务类型选择Tomact V7.0 Server2.根据需要修改 ...

  8. .30-浅析webpack源码之doResolve事件流(1)

    这里所有的插件都对应着一个小功能,画个图整理下目前流程: 上节是从ParsePlugin中出来,对'./input.js'入口文件的路径做了处理,返回如下: ParsePlugin.prototype ...

  9. 51ak带你看MYSQL5.7源码2:编译现有的代码

    从事DBA工作多年 MYSQL源码也是头一次接触 尝试记录下自己看MYSQL5.7源码的历程 目录: 51ak带你看MYSQL5.7源码1:main入口函数 51ak带你看MYSQL5.7源码2:编译 ...

随机推荐

  1. Oracle EBS使用adpatch工具打patch过程(hotpatch mode)

    目录(?)[-] 从Metalink下载补丁 上传解压 使用adpatch来打patch完整的日志 检查patch是否打成功 adpatch的日志文件 补充关于Oracle EBS Patch的类型 ...

  2. .net MVC, webAPI,webForm集成steeltoe+springcloud实现调用服务中心服务的总结

    开始之前,如果没接触过Autofac的,可以移步到Autofac官方示例学习一下怎么使用:https://github.com/autofac/Examples .net 下集成steeltoe进行微 ...

  3. wpf Listbox 实现按住ctrl键来取消选中

    1. 首先继承一个listbox,来获得按住ctrl键时,点击的item public class ListBoxEx : ListBox { public BeatTemplateWave GetA ...

  4. react项目开发中遇到的问题

    前言 作为一个前端爱好者来说,都想在react上一试生手,那么在搭建react项目开发时,肯定会有这样或者那样的问题,尤其是对初学者来说,下面就个人在开发过程中遇到的问题总结一下,好在有google帮 ...

  5. 获取当前人IP地址

    /*** 获取访问的IP地址* @date 2018年11月26日上午11:31:49* @user : taoshao* @param request* @return*/public String ...

  6. JSOI2010 缓存交换

    题目链接:戳我 考虑一个贪心--就是每次我们都选择队列里面之后最晚加入的元素弹出. 维护一个nxt数组就行了. 特判一下之后不会再加入的元素. 代码如下: #include<iostream&g ...

  7. raspberry pi wifi

    vim /etc/network/interfaces 修改 wpa-ssid 和 wpa-psk

  8. Linux - 更改软件源

    镜像源 网易镜像源 在网易开源镜像页面,点击对应镜像名的使用帮助,可以查看到更新源的方法,按步骤操作即可. 阿里云镜像源 在阿里云开源镜像页面,点击对应Mirror分类的help标签,可以查看到更新源 ...

  9. java爬虫学习

    一.java爬取数据 示例:爬取网站中的所有古风网名:http://www.oicq88.com/gufeng/,并储存入数据库(mysql) jdk版本:jdk1.8 编辑器:idea 项目构建:m ...

  10. flask中邮件发送方法

    from flask import Flask from flask_mail import Mail, Message app = Flask(__name__) #配置邮件:服务器/端口/传输层安 ...