系统环境

macOS Sierra v10.12.3
Node.js v6.9.2
npm v4.1.1
yarn v0.18.1
webpack v1.14.0

相关链接

webpack 源码解读:命令行输入webpack的时候都发生了什么?
细说 webpack 之流程篇
webpack源码分析(一)— Tapable插件架构
Tapable中文文档
Webpack 源码(一)—— Tapable 和 事件流
Webpack 源码(二)—— 如何阅读源码

源码解读

./node_modules/webpack/bin/webpack.js

  1. 从「命令行接口(CLI)」中解析参数
  2. 根据「命令行接口」解析的参数,读取「webpack 配置对象(webpack configuration object)」,并解析参数
  3. 根据「webpack 配置对象(webpack configuration object)」解析出的参数,调用 ./node_modules/webpack/lib/webpack.js 进行编译

./node_modules/webpack/lib/webpack.js

  1. ./node_modules/webpack/bin/webpack.js 中会加载 ./node_modules/webpack/lib/webpack.js,并将 options 传入,进行编译。
    1
    2
    3
    (line#155) var webpack = require("../lib/webpack.js");

    (line#159) var compiler = webpack(options);

####
var optimist = require(“optimist”)

Object.defineProperty(self, ‘argv’, {
get : function () {
return parseArgs(processArgs)
},
enumerable : true,
});

var exports = module.exports = Argv;
function Argv(processArgs, cwd) {
var self = {};

var options = {
boolean: [],
string: [],
alias: {},
default: []
};

self.boolean = function (bools) {};

self.string = function (strings) {};

self.default = function (key, value) {};

self.alias = function (x, y) {};

var descriptions = {};
self.describe = function (key, desc) {};

return self;
};
工厂模式:Optimist 模块返回一个函数,执行此函数后返回内部的对象。

1
2
3
4
5
6
7
8
9
10
function createObject(name, age) {
var obj = {};
obj.name = name;
obj.age = age;
return obj;
}
var test1 = createObject('trigkit4', 22);
var test2 = createObject('mike', 25);
console.log(test1.name, test1.age);
console.log(test2.name, test2.age);