Webpack 2：外部ファイルを見る

Question

プロジェクトの外部にあるソースファイルを使用するプロジェクトがあります。効果的には、実際のプロジェクトソースコード（Typescript/Angular 2アプリケーション、それを 'コア'というものと呼ぶことができます）があります。これは、これらの外部ソースファイルを使用するベースコードである汎用Webアプリケーションです。

外部ファイルには、SCSSファイル、画像、追加のJSの追加ファイルなどがあります。私がこれを動作させたいのは、webpackがこれらの外部ファイルをすべてのソースディレクトリ（コアプロジェクトの一部ではありません）からローカルの.tmpディレクトリにコピーすることです。 .tmpディレクトリ内のファイルは、core srcファイルとともに処理され、prod出力を生成します。

これらの外部ソースファイルをウォッチリストに追加する方法がわかりません。私が探しているのは、そのディレクトリを見て、変化すると、影響を受けたファイルをローカルの.tmpディレクトリに再コピーし、再コンパイルをトリガーします。

現在、私はwebpackを再起動して、Gruntを使用して追加のファイルを見る非常に醜い解決策が必要です。面倒ですが、この種の回避策は歴史的に私がwebpackと関係していたものでした。

誰かがより良い解決策を持っていますか？理想的には、私は不快感をウェブパックと混ぜ合わせる必要はありません。 Webpackはこれを行うことができるはずですが、既存のプラグインがあるかどうか、または最良の方法があるかどうかを知ることは困難です。

また、「googleで探す」または「ドキュメントを読む」のコメントを忘れないでください。私はそれをすべて徹底的に梳き、何も見つけていない。

ありがとうございます。

Answer 1

現在のところ、Webpackは外部ファイルをそのまま見ることはありません。あなたはそれのためのプラグインが必要です。

基本的な考え方は、ファイルウォッチャーモジュールchokidar/watchを持って、ファイルの変更を聞いて、変更があったときにWebpackコンパイルフェーズを再開することです。 Webpackプラグインはコンパイルオブジェクトにアクセスすることができ、コンパイルフェーズ、すなわち 'emit'、 'after-emit'などにフックする必要があります。

このWebpackプラグインは、問題を正確に解決します - https://www.npmjs.com/package/filewatcher-webpack-plugin。