Question

让我们假设有一个应用程序包含多个服务器生成的页面，每个页面都有一个旧主干＆＃34;单页应用程序＆＃34;。例如，设置（/ settings）是它自己的SPA。 Foo是它自己的（/ foo）。与Bar，Qux和Fox在他们自己的网址上相同。他们不会互相交流，但我喜欢代码分割，因此每个SPA的捆绑都不会与完全相同的第三方代表团一起膨胀。

Webpack配置可能如下所示：

module.exports = {
    entry: {
        settings: './js/settings.js',
        foo: './js/foo.js',
        bar: './js/bar.js',
        qux: './js/qux.js',
        fox: './js/fox.js'
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    minChunks: 2,
                    name: "vendors",
                    chunks: "all"
                }
            }
        }
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js',
        sourceMapFilename: '[name].map'
    },
}

但是..现在我想添加一个新的酷SPA，＆＃34; Hot＆＃34; at / hot使用一些热门的不同框架，让我们说React。我不想分享相同的＆＃34;供应商＆＃34;但是，因为 - 正如你可以想象的那样 - 那五个旧的SPA有一个非常大的依赖图，几乎没有与Hot相同的deps，我不想要Hot必须拉下来膨胀。如果我向entry添加一个属性hot: './js/hot.js'，之前只有一个旧捆绑包使用d3，现在我的Hot捆绑包也是如此，d3将被代码拆分为vendor捆绑包。但这是我不想要的。此外，如果稍后我添加了许多与Hot相同的deps，现在这两个将被提取到供应商？

我是否需要两个完全独立的webpack配置来完成单独的代码拆分包（无需明确说明每个应该使用哪些deps）？基本上我认为我想要的是：

module.exports = {
    entry: [{
        settings: './js/settings.js',
        foo: './js/foo.js',
        bar: './js/bar.js',
        qux: './js/qux.js',
        fox: './js/fox.js'
    }, {
        hot: './js/hot.js',
        alsoHot: './js/alsoHot.js'
    }],
    // rest is the same
}

webpack 4多组条目，每个

0 个答案: