Question

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

我们的页面始终包含 app.build.js 的脚本标签。该文件具有全局init，并导入我们的公共路径。它导入诸如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,
      },
    }
  }
}

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

1 个答案: