cacheGroups 丢弃我的组，只创建前两个组

Question

我想根据以下方案将我的包拆分成块。但是，只考虑前 2 个块组，我的 editor 组插入到我的应用程序主 js (app) 而不是单独的块。

预期结果：

    "/packs/js/runtime~app.js",
    "/packs/js/vendors.chunk.js",
    "/packs/js/app-commons.chunk.js",
    "/packs/js/editors.chunk.js", // Editors are in this.
    "/packs/js/app.chunk.js"

实际结果：

    "/packs/js/runtime~app.js",
    "/packs/js/vendors.chunk.js",
    "/packs/js/app-commons.chunk.js",
    "/packs/js/app.chunk.js"  // instead, editors inserted to this...

好像在app-commons之后，就把剩下的丢掉了。但是，如果我删除 app_commons，那么 editors 会被创建为一个块。似乎在第二组之后它不遵守我的规则。

代码：

splitChunks(config =>
  Object.assign({}, config, {
    optimization: {
      splitChunks: {
        cacheGroups: {
          commons: {
            test(mod /* , chunk */) {
              if (!mod.context.includes('node_modules')) {
                return false
              }
              if (
                ['editor', 'draft-js', 'highlight'].some(str =>
                  mod.context.includes(str),
                )
              ) {
                return false
              }
              return true
            },
            name: 'vendors',
            chunks: 'all',
            reuseExistingChunk: true,
          },
          app_commons: {
            test(mod /* , chunk */) {
              if (!mod.context.includes('node_modules')) {
                return false
              }
              if (['draft-js', 'highlight'].some(str => mod.context.includes(str))) {
                return true
              }
              return false
            },
            name: 'app-commons',
            chunks: 'all',
            reuseExistingChunk: true,
          },
          editor: {
            test(mod /* , chunk */) {
              if (!mod.context.includes('node_modules')) {
                return false
              }
              if (['editor'].some(str => mod.context.includes(str))) {
                return true
              }
              return false
            },
            name: 'editors',
            chunks: 'all',
            reuseExistingChunk: true,
          },
        },
      },
    },
  }),
)

Answer 1

请将 enforce: true 添加到您的编辑器配置中。

cacheGroups 丢弃我的组，只创建前两个组

cacheGroups discards my groups and only creates first two groups

javascript

webpack

webpack-4

预期结果：

实际结果：

代码：