成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于 webpack 你可能忽略的細節(jié)（附源碼分析）

mtunique / 2841人閱讀

摘要：本篇的主要目標是通過實際問題來介紹中容易被人忽略的細節(jié)以及源碼分析以最新發(fā)布的版本的源碼為例并且提供幾種解決方案。探究原因及源碼分析這里以最新發(fā)布的版本的源碼作為分析。解決方案加參數(shù)基于上面簡要的分析，我們來嘗試下參數(shù)的作用。

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

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

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

Webpack 是什么 
它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過?loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
--引自 Webpack 中文指南
使用舉例

我們來看一下官方文檔中的最小用例，新建并寫入以下內(nèi)容到這兩個文件：

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

我們來看一下發(fā)生了什么， 目錄下生成了一個打包后的文件 app.bundle.js ，這就是最基礎的打包過程。

提出問題

如何判斷打包是否成功？

通用方案

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

通過 return code

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

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

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

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

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

通過標準錯誤輸出

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

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

探究原因及源碼分析

這里以最新發(fā)布的 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();
  }
};

在源碼中可以看到這個函數(shù)其實被調(diào)用的還比較多， 例如：在模塊為可選的時候， 會判斷只是拋出警告還是處理錯誤， 而上面這段代碼自然也不必多數(shù)， 關(guān)鍵點在于 bail 的值， 而我們繼續(xù)找， 可以看到在 bin/config-optimist.js 中有對 bail 參數(shù)的解析， 這是一個布爾值。而因為沒有太多描述， 所以這個參數(shù)就經(jīng)常容易被忽略。

解決方案 1. 加 bail 參數(shù)

基于上面簡要的分析， 我們來嘗試下 bail 參數(shù)的作用。 仍然使用上面的例子：

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

可以看到， 使用 bail 參數(shù)并傳遞 true 進去， 在遇到錯誤的時候，打包過程將會退出， return code 為 1 且把錯誤信息打印到 stderr .

2. 使用 webpack-fail-plugin

webpack-fail-plugin 是專為解決這個問題而生的，它會在錯誤發(fā)生的時候 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 現(xiàn)在還在 beta 階段，可以期待下。 （webpack 2 也仍然是使用 bail 參數(shù)）

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86647.html

相關(guān)文章

  • 前端閱讀 - 收藏集 - 掘金

    摘要：實現(xiàn)不定期更新技巧前端掘金技巧，偶爾更新。統(tǒng)一播放效果實現(xiàn)打字效果動畫前端掘金前端開源項目周報前端掘金由出品的前端開源項目周報第四期來啦。 Web 推送技術(shù) - 掘金騰訊云技術(shù)社區(qū)-掘金主頁持續(xù)為大家呈現(xiàn)云計算技術(shù)文章，歡迎大家關(guān)注！ 作者：villainthr 摘自 前端小吉米 伴隨著今年 Google I/O 大會的召開，一個很火的概念--Progressive Web Apps ...

    lingdududu 評論0 收藏0

  • 從一道面試題，到“我可能看了假源碼”

    摘要：返回的綁定函數(shù)也能使用操作符創(chuàng)建對象這種行為就像把原函數(shù)當成構(gòu)造器。同時，將第一個參數(shù)以外的其他參數(shù)，作為提供給原函數(shù)的預設參數(shù)，這也是基本的顆?；A。 今天想談談一道前端面試題，我做面試官的時候經(jīng)常喜歡用它來考察面試者的基礎是否扎實，以及邏輯、思維能力和臨場表現(xiàn)，題目是：模擬實現(xiàn)ES5中原生bind函數(shù)。也許這道題目已經(jīng)不再新鮮，部分讀者也會有思路來解答。社區(qū)上關(guān)于原生bind的研...

    Carson 評論0 收藏0

  • 從一道面試題，到“我可能看了假源碼”

    摘要：返回的綁定函數(shù)也能使用操作符創(chuàng)建對象這種行為就像把原函數(shù)當成構(gòu)造器。同時，將第一個參數(shù)以外的其他參數(shù)，作為提供給原函數(shù)的預設參數(shù)，這也是基本的顆粒化基礎。 今天想談談一道前端面試題，我做面試官的時候經(jīng)常喜歡用它來考察面試者的基礎是否扎實，以及邏輯、思維能力和臨場表現(xiàn)，題目是：模擬實現(xiàn)ES5中原生bind函數(shù)。也許這道題目已經(jīng)不再新鮮，部分讀者也會有思路來解答。社區(qū)上關(guān)于原生bind的研...

    rockswang 評論0 收藏0

  • 從一道面試題，到“我可能看了假源碼”

    摘要：返回的綁定函數(shù)也能使用操作符創(chuàng)建對象這種行為就像把原函數(shù)當成構(gòu)造器。同時，將第一個參數(shù)以外的其他參數(shù)，作為提供給原函數(shù)的預設參數(shù)，這也是基本的顆?；A。 今天想談談一道前端面試題，我做面試官的時候經(jīng)常喜歡用它來考察面試者的基礎是否扎實，以及邏輯、思維能力和臨場表現(xiàn)，題目是：模擬實現(xiàn)ES5中原生bind函數(shù)。也許這道題目已經(jīng)不再新鮮，部分讀者也會有思路來解答。社區(qū)上關(guān)于原生bind的研...

    jlanglang 評論0 收藏0

  • 前端窩 - 收藏集 - 掘金

    摘要：毫無疑問，設計模式于己于他人于系統(tǒng)都是多贏的設計模式使代碼編寫真正工程化設計模小書前端掘金這是一本關(guān)于的小書。 JavaScript 常見設計模式解析 - 掘金設計模式（Design pattern）是一套被反復使用、多數(shù)人知曉的、經(jīng)過分類編目的、代碼設計經(jīng)驗的總結(jié)。使用設計模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。毫無疑問，設計模式于己于他人于系統(tǒng)都是多贏的；設計...

    李文鵬 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<