Question

在我的webpack.config.js中，我有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 提供的清单文件：

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

$image = $request->file('image')->store('image');
Article::create([
    ...
    "image" => $image,
    ...
])

您可以使用插件CommonsChunkPlugin：

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

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

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