webpack 為什麼這麼難用？

我從多年前的 webpack 1.0 時代就一直在用它，現在也不能說完全掌握了它，很多時候真的讓我產生了懷疑，究竟是因為我的能力不足，還是因為 webpack 自身的設計就太難用？隨著我接觸到越來越多的前端專案，聽到越來越多的吐槽，我也越發地相信，是 webpack 自身的問題，導致它變得如此複雜又難用。

舉個簡單的例子，乙個 vue-cli 生成的最簡單的腳手架專案，開發、構建相關的檔案就有 14 個之多，**超過 800 行，而真實的專案只會比這個更多：

所以，既然這篇文章的標題是《webpack 為什麼這麼難用？》，那我們就好好在這裡分析一下，webpack 難用的根本原因。

一、文件極其不完善

是的，這就是第一位的原因。

真的想說 webpack 即使經過了這麼多年的不斷迭代，如今的文件依然還是是一坨那啥。作為乙個開源專案，設計好不好、易用性怎麼樣、擴充套件性怎麼樣這些問題都是仁者見仁智者見智的，但文件寫得很爛這一點上，真的沒有任何可以開脫的理由。

對於使用者的不友好

比如，webpack 的外掛程式體系可以說是 webpack 最核心的一部分功能了，基本上乙個專案的構建中，大部分任務都是由各種外掛程式完成的。然而，官方文件上對於外掛程式的介紹只有寥寥幾句話：webpack · plugins，甚至推薦你直接去看 webpack 的原始碼：

更糟的是，現有的文件裡（包括 webpack 一些外掛程式的文件也是），大部分內容都是在告訴你「你這樣做就可以了」，而沒有解釋「你為什麼需要這麼做」以及「你這麼做了會有哪些後果」。

比如，在 target 配置上，官方文件裡列舉了你可以構建到哪些 target，如 node、node-webkit、electron-main，但都只是簡單的一句話帶過：

想知道 target 為 electron-main 時，和瀏覽器環境的打包有什麼不同？對不起，官方文件不想告訴你，看原始碼或者去 stackoverflow 上搜吧。

官方文件語焉不詳的直接後果就是，當你遇到了任何問題，你都沒辦法在文件裡得到直接的回答，而是需要看無數的**、github issue、stackoverflow、部落格文章，然後在自己的專案裡反反覆覆試了好多次，才能大致解決問題。而這種所謂的「解決問題」，一般都是個人經驗性的，意味著其它任何乙個人想要解決這個問題，都要重複一遍這個流程，時間成本大量上公升。

對於開發者的不友好

我們要如何開發乙個 webpack 的外掛程式？

官方文件裡確實寫了一些關於如何開發外掛程式的指南。但這份指南也只有 60 分剛及格的水平，它確實向你介紹了 webpack 外掛程式的基礎範例、基本概念以及一些 api，但當你讀完這份簡短的文件後想自己真的去開發乙個外掛程式時，你會發現文件裡講的東西真的遠遠不夠。

我們不妨來看看現在 webpack 生態裡那些成熟的外掛程式是怎麼寫的，以 html-webpack-plugin 為例，這是乙個廣泛用於生成 html 檔案的外掛程式。在它的原始碼裡你會發現，它引用了五個 webpack 內部自帶的外掛程式（原始碼在這裡）：

var nodetemplateplugin = require('webpack/lib/node/nodetemplateplugin');
var nodetargetplugin = require('webpack/lib/node/nodetargetplugin');
var loadertargetplugin = require('webpack/lib/loadertargetplugin');
var librarytemplateplugin = require('webpack/lib/librarytemplateplugin');
var singleentryplugin = require('webpack/lib/singleentryplugin');

嗯哼？這五個外掛程式都是用來幹什麼的？

官方文件上對內建的外掛程式乙個字都沒有提及，是的，甚至連 plugins 這裡都沒有。官方的 wiki 上倒是寫了，但真的真的太簡略了，而且看起來很久沒更新了。

import requestshortener from 'webpack/lib/requestshortener';
import modulefilenamehelpers from 'webpack/lib/modulefilenamehelpers';

文件裡同樣沒有對這兩個檔案做任何介紹。令人欣慰（？）的是，這兩個檔案從檔名上看，起碼是方法庫（實際上也確實是），使用起來不會太複雜。

換句話說，如果你想給 webpack 寫乙個廣為人知的外掛程式，你就必須深入了解 webpack 的全部，這一點我不反對，畢竟 webpack 開發者和 webpack 使用者在能力的要求上有高低之分。但即使是有經驗的開發者，遇到乙個文件如此不完善的開源專案，也是很吃力的。很多能幫助開發者的東西本應該正大光明地寫在文件和指南裡，而不是隱藏在源**裡。

webpack 為什麼這麼難用？

為什麼要用webpack

我為什麼這麼累？

Redis為什麼這麼快？

webpack 為什麼這麼難用？

為什麼要用webpack

我為什麼這麼累？

Redis為什麼這麼快？

相關推薦