注意:この記事は入門チュートリアルではありません.入門は公式ドキュメントを直接参照してください.本編の主な目標は、実際の問題を通じて、webpackで無視されやすい詳細と、ソースコード分析(最新リリースのreleaseバージョン1.14.0のソースコードを例に)を紹介し、いくつかの解決策を提供することです.
先端技術の急速な発展に伴い、エンジニアリング、モジュール化、コンポーネント化の思想が徐々に主流となり、それに対応して、ツールフロー全体がそれを支える必要がある.
現在人気のあるフロントエンドリソースのモジュール化管理とパッケージングツールはWebpackではないはずです.

Webpackって何?

多くのばらばらなモジュールを依存とルールに従って、本番環境の導入に適したフロントエンドリソースにパッケージ化できます.また、必要に応じてロードされたモジュールをコードで区切って、実際に必要に応じて非同期でロードすることもできます.loaderの変換により、CommonJsモジュール、AMDモジュール、ES 6モジュール、CSS、ピクチャ、JSON、Coffeescript、LESSなど、どのような形式のリソースもモジュールと見なすことができる.--Webpack中国語ガイドより引用

使用例

公式ドキュメントの最小例を見てみましょう.この2つのファイルに以下の内容を新規作成して書き込みます.
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が生成されます.これが最も基礎的なパッケージプロセスです.

質問を出す

パッケージが成功したかどうかをどのように判断しますか?

汎用シナリオ

次は、タスクが成功したかどうかを判断する2つの方法です.

return codeで

命令実行後のreturn codeによって判定される(shellでは$?を用いて取得される).また、通常、0は実行成功であり、0以外は成功していない.上記の例でテストしてみましょう.$?の値が0で、パッケージされたファイルが正常に動作していることがわかります.
では、app.jsファイルの内容を修正し、requireに導入されたモジュールパスを故意に書き間違えてテストしてみましょう.
注意:矢印の$?の値は0であり、生成されたパッケージ後のファイルの実行エラーです.
これは、return codeの値に基づいてタスクが成功したか否かを判断し、実行できないことを示している.

標準エラーで出力

また、標準エラー出力(stderr)により、タスク実行中にエラー出力があるかどうかを判断します.やはり上記の例を使用して例を示します.
この例によると、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を使用してテストを行いました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パラメータを使用しています)
下記のQRコードで私の文章の公衆番号【MoeLove】を購読することができます.