Webpack 网页包-如何创建独立入口点（忽略缓存组设置）？

在我的网页配置中，我创建了两个缓存组，“供应商”和“普通”。

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

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

我仍然希望保留优化逻辑。 如果一个模块在30个块中使用，我仍然希望它是“公共”层的一部分

我怎么做

---

谢谢

为要位于该特定缓存组中的所有文件返回true in name函数

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

所有匹配的文件\u此\u regex\u将运行\u name\u 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;
   }
}

通用：{
测试：//，
名称（文件名）{
const filePath=fileName.context；
const regexForFilesInCommonChunks=/isShouldBeInCommon/
if（regexForFilesInCommonChunks.test（filePath））{
返回“普通”
}
返回false；
}
}

我最终导出了2个配置。一个具有公共层（公共/供应商），另一个创建独立/独立捆绑包：

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];
};

---

如果有人有更好的解决方案，不需要两种不同的配置，请分享：）

Hi Raz，谢谢你的回答。这对我不起作用。即使在实现上述逻辑时，common模块也只包含在common.js中，而不包含在common.js和entry2_independent.js中。再次澄清：如果捆绑包的文件名中包含“_independent”，那么公共模块应该包含在XXXX_independent和common.js文件中。

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];
};