8

この投稿の主な目的は、Webpack プラグインの作成中にエラー/警告の管理に関する追加情報を取得することです。

Webpack プラグインのドキュメントで、(コールバックで) タイミング ベースのプラグイン インターフェイスにパラメーターを渡すことができることを見てきましたerrが、それが Webpack のライフサイクルやビルド プロセスにどのように影響するかについては、これ以上の説明はありません。そしてそれを使用する方法。他のタイプのプラグイン インターフェイスでエラーを管理する方法があるかどうかも説明されていません。

とにかく、最初の試行として、ライフサイクルステップで、パラメーターに aまたは単に値'emit'を渡そうとしましたが、どちらの場合も、コンソールに指定された err パラメーターをそのまま表示しました (IE 悲しいことに、エラー固有の配色)、および webpack-sev-server がスタックしました:errnew Error('An error has occurred')'An error has occured'

  function WpAggregationPlugin() {
    this.startTime = Date.now();
    this.prevTimestamps = {};
  }

  WpAggregationPlugin.prototype.apply = function(compiler) {
    compiler.plugin( 'emit', (compilation, callback) => {

      var changedFiles = Object.keys(compilation.fileTimestamps).filter( watchfile => 
        this.prevTimestamps[watchfile] &&
        (this.prevTimestamps[watchfile] < (compilation.fileTimestamps[watchfile] || Infinity)) )

      // compilation.errors.push(new Error('...'))

      this.prevTimestamps = compilation.fileTimestamps;

      if( changedFiles.length <= 0 ) {
        callback()
      } else {
        process.stdout.write( `File modification detected :\n${JSON.stringify(changedFiles, null, 4)}\n` )
        callback( '...' )
      }
    } );
  };

  module.exports = WpAggregationPlugin;

そのため、Webpack ビルド プロセスを再開するには、次の方法で追加のコールバックを呼び出す必要がありました。

  ...
      if( changedFiles.length <= 0 ) {
        callback()
      } else {
        process.stdout.write( `File modification detected :\n${JSON.stringify(changedFiles, null, 4)}\n` )
        callback( '...' )
        callback()       // EXTRA CALL
      }
  ...

残念ながら、この方法では、Webpack のライフサイクルにまったく影響を与えることなく、色付けされていない文字列を stdout に表示するだけです。

私が達成しようとしているのは、エラーの場合に赤いエラー メッセージを表示し、バンドル ビルド プロセスがvalid最終的に新しいビルドでプラグインがエラーなしで実行されるまで状態で終了しないようにすることです。

警告管理については、プラグイン自体の中で直接適切なカラーリングを使用して呼び出すかprocess.stdout.write()、コンパイル パラメーターで警告コレクションをフィードすることによって実行する必要があると思いますが、これまでに報告したことと同様 SO の質問...推測にすぎません:p

記録のために、この質問をするのは、アプリケーション内に散在するすべての翻訳を 1 つのファイルに集約することを目的とする小さなビルド ツールを作成したからです。これは、クライアントが数十ではなく単一の翻訳ファイルを処理できるようにするためです。

「ワンショット」モードまたは監視モードで実行できますが、これをプラグインとして Webpack ビルド プロセスに直接統合するのが最善だと思います。

Webpack の新参者である私は、Webpack のすべての可能性を完全に受け入れておらず、何ができるか/何をすべきかによって誤解を招く可能性があります。それ（もちろん、それはこの投稿の主な理由ではないので、補足として;）

それについてのあなたのヒントとコツを前もってありがとう;）！

4

2 に答える 2