Webpack 有著一堆的坑

Webpack 是個現在蠻有名的前端建構工具,說是「打包」工具不為過,但可能會令你輕忽了 Webpack 的強大,讓你以為 Webpack 就只是打包工具,但事實並非如此。你可以在使用多種工具(如:SassVue)的情況下省去重新整理網頁、重新編譯的困擾,這多虧了 Webpack 熱重載功能,不過還不僅如此。

實際上 Webpack 的 Loaders 更是強大,Loaders 可以看作是載入器,例如你可以替你的專案使用上 BabelSassPostCSSVue.js 然後你完全不需要額外在 HTML 中設定 <script src="..."> 來引用,而且你還不需要替每個檔案重新編譯,因為 Webpack 就可以幫你辦到了,Webpack 是如此地強大。

但是問題也跟著來,而這就是本篇文章要抱怨的地方。

到處都是坑

上網搜尋「Webpack 坑」你會找到新天地,碰過 Webpack 的人八成沒有一個人不採坑。

這裡還有一個知乎問答:「前端构建工具webpack有什么缺陷?」供你觀賞大家的踩坑歷程。

官方文件不明確

要是你學過 Webpack,那麼你也一定看過官方的教學文件,在這裡恭喜你,要是你看得懂的話,你將有資格參與美國國家航空暨太空總署並參與研究火箭的活動,因為這份文件真的是太複雜了。

這個幾乎是大眾的共同意識,在官方的「什麼是 Webpack」章節中你可以看見下方留言有許多人抱怨文件根本不明確,看了兩次還是看不懂,這裡稍微翻譯一下。

chshouyu

「這份文件有夠複雜,我讀了夭壽多次,但是還是不懂到底要怎麼使用它。」

drumaddict71

「我還以為只有我而已⋯⋯!我從 Angular 2 來的。這只是打包工具而已,感覺好像在看什麼火箭的科學藍圖。」

erc183

「對。這文件讓我覺得我像白癡。」

Harshit Thakral

「這份文件就像你只是要建造個機器人但你卻寫得像美國太空總署專案一樣。」

還有很多很多,可以自己到上面的連結看。

-loader 後綴

這點我不曉得是怎樣,在 Webpack 裡有些語法變動的很快,或者是說 Loader 的規定不一至,有時候你的 Loader 會寫成 sass,但是過沒多久就需要改寫成 sass-loader 不然會出現錯誤。

正當你以為所有的 Loader 後面該加上 -loader 後綴的時候,媽的!有的 Loader 根本不能加上 -loader 後綴,所以變成了有些有後綴,而有的則沒有的情況(天阿)。

寫法差異多

Webpack 在每次更新的時候都要小心是不是又會遇到什麼坑,舉例來說過了大概一兩個月才更新的時候,你現有的寫法可能會出現錯誤,然後你就會需要去網路上找這個錯誤是什麼意思。這個錯誤連結在這裡

在這個情況中出現了 Getting error: configuration.resolve.extensions[0] should not be empty 錯誤,原來是 extensions: ['', '.js', '.json'] 現在必須移除掉空的字串改成 extensions: ['.js', '.json'] 了,但這寫法前幾個月前還很正常啊⋯⋯

錯誤不友善、過於廣義

這也是我想抱怨的另一個點,一個錯誤有太多種解釋的方式了,像是這個錯誤

上述錯誤正常來說只有一種解決方式,但是往下看⋯⋯每個人的解答都不一樣!而且有的人是 package.json 最後面多了一個逗點,有的人則是 extensions 中多了一個空字串(這不就是剛才的錯誤?),然後我最終發現⋯⋯是我多加了一個 context: '/' 導致找不到 Module⋯⋯幹。

感想

使用 Webpack 真的很讚,功能很強大,非常地自動化,但是背後的代價就是那數不盡的錯誤、坑,還有需要手動配置一堆的設定內容令人感到煩躁。

且 Webpack 對初學者來說很不易上手,主要是那太過於鬼扯的教學文件搞的好像在看字典或是火箭發射指示,開發者貌似也沒有打算要改善,這點真的是要注意。

然後 Loader 們之間的不合群,每個 Loader 都有各自的設定要配置,這點也是需要注意。