關於 webpack 你可能忽略的細節（附原始碼分析）| 掘金技術徵文

張晉濤發表於2016-12-25
Web原始碼

注：本篇不是入門教程，入門請直接檢視官方文件。本篇的主要目標是通過實際問題來介紹 webpack 中容易被人忽略的細節, 以及原始碼分析(以最新發布的 release 版本1.14.0的原始碼為例), 並且提供幾種解決方案。

關於 webpack 你可能忽略的細節（附原始碼分析）| 掘金技術徵文
webpack from the official website

隨著前端技術的火熱發展，工程化，模組化和元件化的思想已逐步成為主流，與之相應的，就需要有一整套工具流可以支撐起它。

現在比較熱門的前端資源模組化管理和打包工具應該非 Webpack 莫屬了。

Webpack 是什麼

它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需載入的模組進行程式碼分隔，等到實際需要的時候再非同步載入。通過 loader 的轉換，任何形式的資源都可以視作模組，比如 CommonJs 模組、 AMD 模組、 ES6 模組、CSS、圖片、 JSON、Coffeescript、 LESS 等。
--引自 Webpack 中文指南

使用舉例

我們來看一下官方文件中的最小用例，新建並寫入以下內容到這兩個檔案：

cats.js

var cats = ['dave', 'henry', 'martha'];
module.exports = cats;複製程式碼

app.js (Entry Point)

cats = require('./cats.js');
console.log(cats);複製程式碼

這個時候，就可以使用 webpack 進行打包了：

webpack ./app.js app.bundle.js複製程式碼

我們來看一下發生了什麼， 目錄下生成了一個打包後的檔案 app.bundle.js ，這就是最基礎的打包過程。

提出問題

如何判斷打包是否成功？

通用方案

下面是我們常用的兩種判斷任務是否執行成功的方案

通過 return code

通過命令執行後的 return code 來判斷（在 shell 中使用 $? 獲得）。 並且通常情況下 0 是執行成功， 非 0 是未成功。 我們以上面的例子來測試一下：

關於 webpack 你可能忽略的細節（附原始碼分析）| 掘金技術徵文
webpack-demo.png

可以看到 $? 的值為 0 , 且打包後的檔案執行正常。

那麼我們來修改一下 app.js 檔案的內容， 將 require 引入的模組路徑故意寫錯，來測試一下：

關於 webpack 你可能忽略的細節（附原始碼分析）| 掘金技術徵文
webpack-error.png

注意：箭頭處 $? 的值仍然為 0, 且生成的打包後的檔案執行出錯。

這就說明，根據 return code 的值判斷任務是否執行成功， 不可行！

通過標準錯誤輸出

我們也會通過標準錯誤輸出（stderr）來判斷一個任務執行過程中是否有錯誤輸出。還是使用上面的例子做示範：

關於 webpack 你可能忽略的細節（附原始碼分析）| 掘金技術徵文
webpack-stderr.png

根據這個例子，可以看到 webpack 並沒有標準錯誤輸出！所以這個方法也不可行。

探究原因及原始碼分析

這裡以最新發布的 release 版本 1.14.0 的原始碼作為分析。 在 lib/Compilation.js 中我們可以看到這樣一段程式碼：

var errorAndCallback = function errorAndCallback(err) {
  err.dependencies = dependencies;
  err.origin = module;
  module.dependenciesErrors.push(err);
  _this.errors.push(err);
  if(bail) {
    callback(err);
  } else {
    callback();
  }
};複製程式碼

在原始碼中可以看到這個函式其實被呼叫的還比較多， 例如：在模組為可選的時候， 會判斷只是丟擲警告還是處理錯誤， 而上面這段程式碼自然也不必多數， 關鍵點在於 bail 的值， 而我們繼續找， 可以看到在 bin/config-optimist.js 中有對 bail 引數的解析， 這是一個布林值。而因為沒有太多描述， 所以這個引數就經常容易被忽略。

解決方案

1. 加 bail 引數

基於上面簡要的分析， 我們來嘗試下 bail 引數的作用。 仍然使用上面的例子：

我們使用 webpack --bail true app.js app.bundle.js 進行測試

關於 webpack 你可能忽略的細節（附原始碼分析）| 掘金技術徵文
webpack-bail.png

可以看到， 使用 bail 引數並傳遞 true 進去， 在遇到錯誤的時候，打包過程將會退出， return code 為 1 且把錯誤資訊列印到 stderr .

2. 使用 webpack-fail-plugin

webpack-fail-plugin 是專為解決這個問題而生的，它會在錯誤發生的時候 return 1. 使用方法也很簡單：

安裝：

npm install webpack-fail-plugin複製程式碼

使用：

var failPlugin = require('webpack-fail-plugin');

module.exports = {
    //config 
    plugins: [
        failPlugin
    ]
}複製程式碼

3.使用 done plugin

具體用法如下：

// ...
plugins: [ 
  // ... 
  function() { 
    this.plugin("done", function(stats) {
      if (stats.compilation.errors && stats.compilation.errors.length) {
        console.log(stats.compilation.errors); 
        process.exit(1); 
      }
      // ... 
    }); 
  }
// ...
],
// ...複製程式碼

4. 使用 webpack 2

不過 webpack 2 現在還在 beta 階段，可以期待下。 （webpack 2 也仍然是使用 bail 引數）

可以通過下面二維碼訂閱我的文章公眾號【MoeLove】

關於 webpack 你可能忽略的細節（附原始碼分析）| 掘金技術徵文

掘金技術徵文第一期：我與那些開發庫 / 框架的愛恨情仇 gold.xitu.io/post/58522d…

相關文章