javascript - Webpack v4 在单个页面上有多个条目， block 被不必要地重复

Question

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

我们的页面始终包含 的脚本标签app.build.js .该文件具有全局初始化，并导入我们的公共(public)路径。它导入诸如 Modernizr 之类的东西并构建我们的站点导航。

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

看起来 Webpack 似乎不知道这种组合，因此两个输出文件中存在冗余 block 。它们都可能包括 Modernizr 测试等，所有这些都被添加到两个构建文件中，使它们显着膨胀。

我的问题是，你如何告诉 Webpack app.build.js 是全局范围内的？？？我们为我们的 vendor 使用 SplitChunks 执行此操作，但它匹配导入，而不是条目文件名。

我们现在还需要 import './public-path';在每个条目文件中，这并不理想。我宁愿在 中执行一次app.build.js 并使其在全局范围内得到认可。

在此处使用 Webpack 提交的错误:https://github.com/webpack/webpack/issues/8842

Answer 1

如果您想将所有重复项移动到单个文件 (commons.js) 中，将所有内容放在一边vendors.js 中的 vendor 文件您可以指定多个缓存组。这个commons.js将包含跨所有入口点重复的所有模块。

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