Webpack 2：觀看外部文件

Question

我有一個使用項目外部源文件的項目。實際上，有實際的項目源代碼（一個Typescript/Angular 2應用程序，可以稱之爲'核心'），這是一個通用的Web應用程序，它將成爲使用這些外部源文件的基本代碼。

外部文件包含附加內容 - 可能是SCSS文件，圖像，evn附加JS。我希望這項工作的方式是，webpack將這些外部文件從任何源目錄（這很關鍵，它不是核心項目的一部分）複製到本地.tmp目錄。 .tmp目錄中的文件與核心src文件一起工作以生成prod輸出。

我不知道如何將這些額外的外部源文件添加到監視列表。實際上，我期望做的是觀察該目錄，當事情發生變化時，它會將受影響的文件重新複製到本地.tmp目錄並觸發重新編譯。

目前，我必須重新啓動webpack，並有一個非常非常醜陋的解決方案，使用Grunt來觀看其他文件。這是令人討厭的，但這些解決方法歷來是我必須做的與webpack。

有沒有人有更好的解決方案？理想情況下，我想不必混合與webpack的咕嚕聲。 Webpack應該能夠做到這一點，但很難知道是否有一個現有的插件或最好的方法。

此外，請不要在「在谷歌上查找」或「閱讀文檔」的評論。我已經完成了所有的努力，並且沒有找到任何東西。

在此先感謝。

Answer 1

截至目前，Webpack並不直接觀看外部文件。你需要一個插件。

基本上的想法是有一個文件觀察器模塊chokidar/watch，監聽文件的變化，當有變化時，重新啓動webpack編譯階段。 Webpack插件可以訪問編譯對象，我們需要將它掛接到編譯階段，即「發射」，「後發射」等。

這個Webpack插件完全解決了您的問題 - https://www.npmjs.com/package/filewatcher-webpack-plugin。