带多个入口点的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输出束（根据“文件名”中“输出”配置格式），因为供应商包已经是相同的了。

您可以尝试使用您的特定入口点。