浅析webpack源码之前言(一)

栏目: JavaScript · 发布时间: 5年前

内容简介:本以为用框架以及用熟练后,到达了一个美丽的小湖泊,读源码发现原来还有一望无际的海洋,壮丽的雪山,浩淼的星辰。读webpack对面试也没什么用(刷leetcode,面试题更有用),你说你看webpack学会了啥,一时半会也说不清楚,但就是想看,想就去做,只要不危害他人如果你想知道webpack的算法实现

为什么读webpack源码

  • 因为前端框架离不开webpack,天天都在用的东西啊,怎能不研究
  • 读源码能学到很多做项目看书学不到的东西,比如说架构,构造函数,es6很边缘的用法,甚至给函数命名也会潜移默化的影响等
  • 想写源码,不看源码怎么行,虽然现在还不知道写什么,就算不写什么,看看别人写的总可以吧
  • 知道世界的广阔,那么多插件,那么多软件开发师,他们在做什么,同样是写js的,怎么他们能这么伟大
  • 好奇心

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

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

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

  • 我可以只读不写的,这样还读的更快,只是后面想起了,不知道读了啥,读vue的时候好多都没有记录,但是即便那样当我再次看到那个函数我知道那是做什么
  • 给公司写的项目代码,如果项目被砍,感觉白写了一样
  • 为了证明自己的存在,证明自己来过
  • 如果通过看这个文章你能能学到丝毫的知识,是我之幸:v:

看这个你能学到什么

如果你想知道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模块


以上所述就是小编给大家介绍的《浅析webpack源码之前言(一)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

从问题到程序

从问题到程序

裘宗燕 / 机械工业出版社 / 2011-5 / 39.00元

《从问题到程序:程序设计与C语言引论(第2版)》以C作为工具语言,讨论了基本程序设计的各方面内容,详细解释了与c语言和程序设计有关的问题。在新版中,特别加强了针对近年日益受到业界和学术界广泛重视的问题的讨论,并通过详细地分析和讨论大量符合C99标准的实例,给出了分析和分解问题、找出解决问题的主要步骤、确定函数抽象、找出循环、选择语言结构直至最后做出所需程序的完整过程。 《从问题到程序:程序设......一起来看看 《从问题到程序》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具