淺析webpack原始碼之前言（一）

織雪紗奈發表於2019-02-16
Web原始碼

為什麼讀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 效果檢視

相關文章