Webpack watch()有多个入口点 - 为未更改的文件发送捆绑包？

Question

在我的webpack.config.jsI中有3个单独的入口点,一个用于JS包,一个用于主SCSS包,另一个用于与主SCSS包无关的单独 SCSS包.

当我使用webpack.watch()API时,出于某种原因编辑JS源文件,不仅会导致重新编译JS包,还会导致2个SCSS包.
为什么会这样,以及如何停止此行为并确保仅重新编译已编辑的入口点？

这是一个问题的原因是我正在使用browsersync,对于CSS bundle重新编译我只是注入CSS而不是重新加载,但是在HTML/JS上编辑它的重新加载.但是,如果我编辑SCSS并且它还重新编译JS/HTML browsersync触发器重新加载而不是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']
})

此配置生成一个清单文件作为另一个输出。在这种情况下，如果您对“app ”入口点进行更改，webpack 只会重新编译 main.js 输出包（根据“输出”配置中的“文件名”格式），因为供应商包已经是相同的。

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