配置webpack为每个条目生成单独的供应商js文件

Question

我在一个应用程序中有多个js应用程序。每个js应用程序对js库都有不同的依赖关系，每个js应用程序都是webpack的entry。当前的Webpack设置仅生成一个vendor.bundle.js。

如何配置Webpack为每个条目生成单独的供应商捆绑包js文件？

期望的输出：

• vendor.bundle.js
• vendor〜app1.bundle.js
• vendor〜app2.bundle.js
• app1.bundle.js
• app2.bundle.js

Webpack配置

module.exports = {
    entry: {
     'app1': './src/AppOne.js',
     'app2': './src/AppTwo.js'
    },

    output: {
        path: path.resolve(__dirname, './resources/js/dist'),
        filename: '[name].bundle.js'
    },

    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: 'vendor',
                    chunks: 'initial',
                    minChunks: 2
                }
            }
        }
    }
}

Answer 1

删除optimization块

或

使用chunks: 'all'似乎有效。

optimization: {
    splitChunks: {
            chunks: 'all'
        }
},