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

【问题标题】：Webpack watch() with multiple entry points - emitting bundles for non-changed files?具有多个入口点的 Webpack watch() - 为未更改的文件发送捆绑包？
【发布时间】：2017-07-20 05:56:48
【问题描述】：

在我的webpack.config.js 中，我有 3 个单独的入口点，一个用于 JS 包，一个用于 主 SCSS 包，一个用于 单独与主 SCSS 包没有关系的 SCSS 包。

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

这是一个问题的原因是我正在使用browsersync，并且对于 CSS 包重新编译我只是注入 CSS 而不是重新加载，但在 HTML/JS 上编辑它的重新加载。但是，如果我编辑 SCSS 并且它还重新编译 JS/HTML browsersync 会触发重新加载而不是 CSS 注入。

【问题讨论】：

确保cache 未被禁用。
你能在这里复制/粘贴你的 webpack 配置吗？
它仍然是真实的吗？我正在使用Webpack + Browsersync，对我来说，这样的情况运行良好。如果仍然对此感兴趣，我可以帮助你...

标签： javascript node.js webpack browser-sync

【解决方案1】：

在这种情况下，您需要一个文件来让 webpack 检测在每个不同的入口点上做了多少更改。

为此，您可以使用 commonsChunkPlugin 提供的 manifest 文件：

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

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

您可以使用插件 CommonsChunkPlugin：

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

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

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

【讨论】：