Webpack v4在单个页面上有多个条目，不必要地复制块

Question

我有一个多页面网站，其中一部分页面是SPA。我们刚刚升级到Webpack V4并遇到了一些我们以前从未见过的新问题。

我们的页面总是包含app.build.js的脚本标记。此文件具有全局内容，并导入我们的公共路径。它导入像Modernizr这样的东西并构建我们的网站导航。

此外，在每页的基础上，我们提供第二个JS文件，如account.build.js。如果某些页面非常简单，则它们没有第二个文件。他们仍然需要app.build.js来创建导航。

看起来好像Webpack不知道这个组合，所以两个输出文件中有多余的块。它们都可能包括Modernizr测试等等，所有这些都会被添加到两个构建文件中，这些文件显着膨胀。

我的问题是，你怎么告诉Webpack app.build.js全局包含???我们使用SplitChunks为我们的供应商执行此操作，但它匹配导入，而不是条目文件名。

我们现在还需要在每个条目文件中使用import './public-path';，这并不理想。我更愿意在app.build.js中做一次并让它全局识别。

在这里向Webpack提交的错误：https://github.com/webpack/webpack/issues/8842

Answer 1

如果要将所有重复项移动到单个文件（commons.js），请将vendors.js中的所有供应商文件放在一边，您可以指定多个缓存组。这个commons.js将包含所有入口点重复的所有模块。

optimization: {
  splitChunks: {
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      },
      commons: {
        name: 'commons',
        chunks: 'all',
        minChunks: 2,
        enforce: true,
      },
    }
  }
}