摘要：我们打开根据上次所返回的这个因为有了上次的基础，比较容易读了大体逻辑是这样的先定义一个空对象同上次的一个逻辑，还是一个目前的方式只有一个满足如果满足的会执行一系列函数这个函数直接结果是的影响是打比如如果满足的话当你的时候就会在页面上出
我们打开bin/cli.js
根据上次所返回的Options
processOptions(options)
这个因为有了上次的基础，比较容易读了,大体逻辑是这样的
先定义一个 outputOptions 空对象
同上次的ifArg一个逻辑，argv还是一个
function ifArg(name, fn, init) {
if (Array.isArray(argv[name])) {
if (init) init();
argv[name].forEach(fn);
} else if (typeof argv[name] !== "undefined") {
if (init) init();
fn(argv[name], -1);
}
}
目前的方式只有一个满足
info-verbosity
如果满足的会执行fn, init一系列函数
ifArg("info-verbosity", function(value) {
outputOptions.infoVerbosity = value;
});
这个函数直接结果是
outputOptions.infoVerbosity = "info";
outputOptions.infoVerbosity的影响是打log
比如如果 watch满足的话
if (outputOptions.infoVerbosity !== "none"){
console.log("
webpack is watching the files…
");
}
当你npm run dev的时候就会在页面上出现
webpack is watching the files…
这样一句话了
其他逻辑类此，通过调用ifArg 对outputOptions对象添加数据，然后根据属性的值来打不同的log
这就是processOptions的函数所做的事情
这些都不影响主进程
const webpack = require("webpack");
let compiler;
compiler = webpack(options);
// ...
compiler.run(compilerCallback);
拉开了webpack的序幕
なに（纳尼） 经过一番搜索
在webpack/lib/webpack.js
先不纠结为什么找到了lib下
我们继续读
打开webpack.js
const Compiler = require("./Compiler");
// ...模块引入
function webpack(options, callback) {
// 错误检测
const webpackOptionsValidationErrors = validateSchema(webpackOptionsSchema, options);
if(webpackOptionsValidationErrors.length) {
throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
}
let compiler;
// 多配置
if(Array.isArray(options)) {
compiler = new MultiCompiler(options.map(options => webpack(options)));
}
// 单配置
else if(typeof options === "object") { /*...*/ }
else {
throw new Error("Invalid argument: options");
}
if(callback) { /*...*/ }
return compiler;
}
exports = module.exports = webpack;
webpack.WebpackOptionsDefaulter = WebpackOptionsDefaulter;
// ...属性挂载
function exportPlugins( /*...*/ )
exportPlugins( /*...*/ );
exportPlugins( /*...*/ );
可以主要分为以下几块：
1、工具模块引入
2、对配置对象进行错误检测
3、分多配置或单配置进行处理
4、执行回调函数
5、在webpack函数上挂载引入的模块
6、输出一些插件
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/101091.html
摘要：引言通过前面几张的铺垫下面开始分析源码核心流程大体上可以分为初始化编译输出三个阶段下面开始分析初始化这个阶段整体流程做了什么启动构建，读取与合并配置参数，加载，实例化。推荐源码之源码之机制源码之简介源码之机制参考源码 引言 通过前面几张的铺垫,下面开始分析webpack源码核心流程,大体上可以分为初始化,编译,输出三个阶段,下面开始分析 初始化 这个阶段整体流程做了什么? 启动构建，读...
摘要：我们看到引入了对进行分析是一个很大的文件，里面规定了我们随便看一段这是对你输入的规定的要求是是其实就是本下的这样写可以提取公用的配置，避免代码冗余一共行，其中就占了行接下里进入函数引入引入了，我们在搜索链接我们看到，在文档里这样的描述的用法 我们看到引入了 对webpack.js const validateSchema = require(./validateSchema); con...
摘要：接下来我看看一下函数我们先按照分支走为读取是里的对象，饶了这大的一个圈子，那么接下来一起来看一看对你的输入配置做了怎么样的处理吧 打开webpeck-cli下的convert-argv.js文件 // 定义options为空数组 const options = []; // webpack -d 检查 -d指令 if (argv.d) { //... } ...
为什么读webpack源码 因为前端框架离不开webpack，天天都在用的东西啊，怎能不研究 读源码能学到很多做项目看书学不到的东西，比如说架构，构造函数，es6很边缘的用法，甚至给函数命名也会潜移默化的影响等 想写源码，不看源码怎么行，虽然现在还不知道写什么，就算不写什么，看看别人写的总可以吧 知道世界的广阔，那么多插件，那么多软件开发师，他们在做什么，同样是写js的，怎么他们能这么伟大 好奇...
摘要：小尾巴最终返回了属性挂载把引入的函数模块全部暴露出来下面暴露了一些插件再通俗一点的解释比如当你你能调用文件下的方法这个和上面的不同在于上面的是挂在函数对象上的正题要想理解必须要理解再写一遍地址我们先简单的理解它为一个通过注册插件是插件的事 webpack.js小尾巴 const webpack = (options, callback) => { //... if (...
阅读 1280·2021-11-16 11:45
阅读 2216·2021-11-02 14:40
阅读 3822·2021-09-24 10:25
阅读 3014·2019-08-30 12:45
阅读 1178·2019-08-29 18:39
阅读 2455·2019-08-29 12:32
阅读 1533·2019-08-26 10:45
阅读 1898·2019-08-23 17:01
