Webpack - 如何创建独立的入口点（忽略cacheGroups设置）？

Question

在我的webpack配置中，我创建了两个缓存组，"vendors"和"common"。

        entry: {
            'entry1': './src/entry1.js',
            'entry2_independent': './src/entry2_independent.js',
        },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    vendors: {
                        minChunks: 30,
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendors',
                        priority: -10,
                        chunks: 'initial'
                    },
                    default: {
                        minChunks: 30,
                        priority: -20,
                        chunks: 'initial',
                        reuseExistingChunk: true,
                        name: 'common'
                    }
                }
            }
        },

我希望我的其中一个入口点是独立的。它应该包括所有依赖项，而不依赖于common.js或vendors.js。

更具体地说，我想要所有名称中带有“_independent”的入口点都是独立的。

我仍然想保留优化逻辑。 如果一个模块在30个chunks中被使用，我仍然希望它成为“common”层的一部分。

我该如何实现呢？

谢谢！

- eli

---

这个回答解决了你的问题吗？如何在Webpack 4中拆分两个条目中的一个？ - VimNing

Answer 1

在所有你想要包含在特定缓存组中的文件的名称函数中返回true。

函数名称将在其路径匹配all_files_that_match_this_regex_will_run_name_func的所有文件上运行。

如果函数返回true，则该文件将嵌入到common块中。

 common: {
   test: /<all_files_that_match_this_regex_will_run_name_func>/,
   name(fileName) {
      const filePath = fileName.context;
      const regexForFilesInCommonChunks = /isShouldBeInCommon/

      if (regexForFilesInCommonChunks.test(filePath)) {
          return 'common'
      }

      return false;
   }
}

- Raz Ronen

---

嗨 Raz，感谢你的回答。 对我来说它不起作用。即使我实现了上述逻辑，公共模块仅包含在common.js中，而不是同时包含在common.js和entry2_independent.js中。再次澄清： 如果捆绑包文件名包含“_independent”，则应将公共模块包含在两个文件XXXX_independent和common.js中。 - eli

Answer 2

我最终导出了两个配置文件。一个包含通用层（common/vendors），另一个创建独立的捆绑包：

module.exports = function (env) {

    const baseConfig = {
        mode: env.development ? 'development' : 'production',
        devtool: 'source-map',
        watch: !!env.development,
        output: {
            path: path.resolve(__dirname, CONSTS.DIST),
            filename: '[name].js',
            chunkFilename: '[name].js',
            publicPath: '/dist/scripts/',
            globalObject: 'this',
        }
    };

    const clientConfig = Object.assign({}, baseConfig, {
        entry: {
            'client-entry1': './src/entry1.js',
            'client-entry2': './src/entry2.js',
        },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    vendors: {
                        minChunks: 30,
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendors',
                        priority: -10,
                        chunks: 'initial'
                    },
                    default: {
                        minChunks: 30,
                        priority: -20,
                        chunks: 'initial',
                        reuseExistingChunk: true,
                        name: 'common'
                    }
                }
            }
        }
    });

    const serverConfig = Object.assign({}, baseConfig, {
        entry: {
            'independent-bundle1': './src/entry1_independent.js',
            'independent-bundle2': './src/entry2_independent.js',
        }
    });

    return [clientConfig, serverConfig];
};

如果有更好的解决方案不需要两个不同的配置，请分享 :)

- eli

Answer 3

我希望我的一个入口点是独立的。请注意，默认情况下，所有入口点都是相互独立的。一个天真的用户可能会犯的最常见错误是在入口之间进行模块复制。相反，您可以使用 dependOn 使一个入口点重用另一个入口点中的所有模块。我认为这是与您的方法不同的另一种方法，也是我认为很好的做法：不使用意味着不相关。

- VimNing