帶多個入口點的Webpack watch（） - 爲未更改的文件發送包？

Question

在我的webpack.config.js中，我有3個單獨的入口點，一個用於JS包，一個用於主SCSS包，另一個用於與主SCSS包沒有關係的單獨SCSS包。

當我使用webpack.watch（）API時，由於某種原因編輯，比如JS源文件，不僅導致JS包被重新編譯，而且導致2個SCSS包。爲什麼會這樣，我該如何阻止這種行爲並確保只有編輯的入口點才能重新編譯？

這是一個問題的原因是我使用瀏覽器同步，並且對於CSS包重新編譯我只是注入CSS而不是重新加載，但在HTML/JS上編輯它的重新加載。但是，如果我編輯SCSS，並且它還重新編譯JS/HTML瀏覽器同步會觸發重新加載而不是CSS注入

Answer 1

在這種情況下，您需要一個文件讓webpack檢測每個不同入口點有多少更改。

對於這一點，你可以使用提供commonsChunkPlugin的清單文件：

例如，如果您有以下入口點：

entry: { 
    app: 'main.js', // main entry point 
    vendor: ['jquery', 'react'] //Third libraries 
} 

您可以使用插件CommonsChunkPlugin：

new wepack.optimize.CommonsChunkPlugin({ 
    name: ['vendor', 'manifest'] 
}) 

該配置生成清單文件作爲另一個輸出。在這種情況下，如果你把你的「應用」入口點的變化，的WebPack只是要重新編譯main.js輸出束（根據「文件名」中「輸出」配置格式），因爲供應商包已經是相同的了。

您可以嘗試使用您的特定入口點。