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

时间:2019-02-20 21:17:53

标签: javascript webpack build node-modules webpack-4

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

1 个答案:

答案 0 :(得分:0)

如果您要将所有重复项移到单个文件(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,
      },
    }
  }
}