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

Posted 2023-03-07

【中文标题】Webpack v4 在单个页面上有多个条目，块被不必要地重复

【英文标题】：Webpack v4 with multiple entries on a single page, chunks are duplicated unnecessarily

【发布时间】：2019-07-14 16:15:02

【问题描述】：

我有一个多页网站，其中包含一个 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

【问题讨论】：

你能把你webpack.config.js的内容贴出来吗？

当然，这里是：gist.github.com/lostPixels/fef3f0cc4a3e99bf526249c605c2096f

你找到答案然后@lostPixels 了吗？

看github.com/webpack/webpack/issues/10537我想还是没有答案？

不，到目前为止 Sorka 还没有答案。

【参考方案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,
      ,
    
  

【讨论】：

不幸的是，我们尝试了这个，它没有捕获包含在两个条目文件中的块，这些文件在一个 html 文档中配对在一起。