關于 webpack 你可能忽略的細節（附源碼分析）

Woodrow3385 7年前發布 | 10K 次閱讀源碼分析前端技術 webpack

本篇的主要目標是通過實際問題來介紹 webpack 中容易被人忽略的細節, 以及源碼分析( 以最新發布的 release 版本1.14.0的源碼為例 ), 并且提供幾種解決方案。

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-demo.png

可以看到 $? 的值為 0 , 且打包后的文件運行正常。

那么我們來修改一下 app.js 文件的內容，將 require 引入的模塊路徑故意寫錯，來測試一下：

webpack-error.png

注意：箭頭處 $? 的值仍然為 0 , 且生成的打包后的文件運行出錯。

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

通過標準錯誤輸出

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

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-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 參數）

來自：http://www.jianshu.com/p/21eaaacba1f2

本文由用戶 Woodrow3385 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1483068573756.html

源碼分析前端技術 webpack