浅析webpack源码之前言（一）

suosuopuo 发布于2019-08-23 14:49 / 1550人阅读

为什么读webpack源码

因为前端框架离不开webpack，天天都在用的东西啊，怎能不研究

读源码能学到很多做项目看书学不到的东西，比如说架构，构造函数，es6很边缘的用法，甚至给函数命名也会潜移默化的影响等

想写源码，不看源码怎么行，虽然现在还不知道写什么，就算不写什么，看看别人写的总可以吧

知道世界的广阔，那么多插件，那么多软件开发师，他们在做什么，同样是写js的，怎么他们能这么伟大

好奇心

本以为用框架以及用熟练后，到达了一个美丽的小湖泊，读源码发现原来还有一望无际的海洋，壮丽的雪山，浩淼的星辰。

读webpack对面试也没什么用（刷leetcode，面试题更有用），你说你看webpack学会了啥，一时半会也说不清楚，但就是想看，想就去做，只要不危害他人

为什么写webpack源码系列文章博客

我可以只读不写的，这样还读的更快，只是后面想起了，不知道读了啥，读vue的时候好多都没有记录，但是即便那样当我再次看到那个函数我知道那是做什么

给公司写的项目代码，如果项目被砍，感觉白写了一样

为了证明自己的存在，证明自己来过

如果通过看这个文章你能能学到丝毫的知识，是我之幸✌️

看这个你能学到什么

如果你想知道webpack的算法实现

我建议你看这个git地址

虽然写的不够好，但是已经是我能找到的中写的最好的

里面更多记录了怎么跟踪的过程

你能学到如何调试以及阅读源码

知道webpack页面架构

webpack哪些模块实现了什么功能

如何读webpack 准备

自己用webpack搭建一个项目,甚至是现成的读webpack都可以

当你npm run build 发生了什么？

参考npm的run-script文档

npm run会自动添加node_module/.bin 到当前命令所用的PATH变量中，
因此，npm run build 会执行package.json配置的build，目前我配置的是webpack，
实际会调用 node_modules/.bin/webpack

打开项目找到node_modules/.bin/webpack，需要点耐心，需要翻很多
webpack是一个符号连接
指到了webpack/bin/webpack.js

log大法

第一行是

#!/usr/bin/env node

它被称为 Shebang。

/usr/bin/env 不是一个路径，而是一个命令，
后面跟node 参数，就会找到node并调用它。

$ /usr/bin/env node --version
v10.11.0

log 调试

颜色log DEGUB

用这个打印log会区分颜色，事实上我用着，也没那么好用

顺便讲一下吧

安装

npm i -D debug

在要调试的文件中
定义

const log = require("debug")("debug-webpack webpack webpack.js");
log("你想打印的")

请把react-beauty-highcharts替换成你的文件名，这样才会有log

DEBUG=react-beauty-highcharts* npm run build

这个有个缺点就是如果json比较大，每一行都会打印一遍debug-webpack webpack webpack.js名字，不好复制,还是console.log() 好使

我们打开文件，里面主要处理了一些安装的逻辑
没安装包报错之类的
找到

const cliPath = path.resolve(path.dirname(pkgPath), pkg.bin[installedClis[0].binName]);
// 引入了路径看到打印了路径是node_modules/webpack-cli/bin/cli.js
require(cliPath);

接下来打开webpack-cli/bin/cli.js

241行

let options;
try {
    options = require("./convert-argv")(argv);
} catch (err) {
    
}

我们分析convert-argv模块
想有更好的视觉效果
传送门vuepress 效果查看

GPU云服务器云服务器源码浅析源码中文说明之前言 asp报告前言

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101202.html

浅析webpack源码之processOptions处理Options以及入口函数（三）

摘要：我们打开根据上次所返回的这个因为有了上次的基础，比较容易读了大体逻辑是这样的先定义一个空对象同上次的一个逻辑，还是一个目前的方式只有一个满足如果满足的会执行一系列函数这个函数直接结果是的影响是打比如如果满足的话当你的时候就会在页面上出我们打开bin/cli.js根据上次所返回的Options processOptions(options)这个因为有了上次的基础，比较容易读了,大体逻辑...

doodlewind 2019-08-23 14:45 评论0 收藏0
浅析webpack源码之convert-argv模块（二）

摘要：接下来我看看一下函数我们先按照分支走为读取是里的对象，饶了这大的一个圈子，那么接下来一起来看一看对你的输入配置做了怎么样的处理吧打开webpeck-cli下的convert-argv.js文件 // 定义options为空数组 const options = []; // webpack -d 检查 -d指令 if (argv.d) { //... } ...

lemon 2019-08-23 14:38 评论0 收藏0
浅析webpack源码之WebpackOptionsApply 模块(七)

摘要：还做了处理，是之所以能根据变化自己更新的核心，好凌乱，我们先从那个坑跳出来进入这个大坑进入这个页面看到前面一大堆的模块引入，已经给跪了，但是马马虎虎的完成也比放弃好前面一大堆的引入，主要是下和文件夹下的模块父类就只是定义了接口主要核心在方法 NodeEnvironmentPlugin还做了watch处理，NodeWatchFileSystem是webpack之所以能根据变化自己更新的核...

AaronYuan 2019-08-23 14:49 评论0 收藏0
浅析webpack源码之Compiler.js模块(八)

摘要：小尾巴最终返回了属性挂载把引入的函数模块全部暴露出来下面暴露了一些插件再通俗一点的解释比如当你你能调用文件下的方法这个和上面的不同在于上面的是挂在函数对象上的正题要想理解必须要理解再写一遍地址我们先简单的理解它为一个通过注册插件是插件的事 webpack.js小尾巴 const webpack = (options, callback) => { //... if (...

PumpkinDylan 2019-08-23 14:50 评论0 收藏0
浅析webpack源码之NodeEnvironmentPlugin模块总览（六）

摘要：进入传入地址出来一个复杂对象把挂载到对象上太复杂我们先看可以缓存输入的文件系统输入文件系统输出文件系统，挂载到对象传入输入文件，监视文件系统，挂载到对象添加事件流打开插件读取目录下文件对文件名进行格式化异步读取目录下文件同步方法就进入webpack.js //传入地址,new Compiler出来一个复杂对象 compiler = new Compiler(options.conte...

ChristmasBoy 2019-08-23 14:49 评论0 收藏0