即使在webpack配置中拆分后，供应商代码仍然在bundle.js文件中

Question

使用下面的webpack配置，我仍然在bundle.js文件中获得供应商代码。（即使在代码拆分后，bundle.js的大小仍然相同）。 我希望供应商代码不应出现在bundle.js

中

遵循某些链接，但它没有帮助。 （https://github.com/dmachat/angular-webpack-cookbook/wiki/Split-app-and-vendors）

'use strict';

 var webpack = require('webpack');

module.exports = {
context: __dirname + '/client/js',
entry: {
    source: ['./init.jsx'],
    vendor: ['react',
        'react-dom',
        'redux',
        'axios',
        'ramda-fantasy',
        'ramda',
        'react-json-tree',
        'react-tooltip',
        'validator']
},
output: {
    filename: "[name].bundle.js"
},
resolve: {
    modulesDirectories: ['node_modules'],
    extensions: ['', '.js', '.jsx']
},
module: {
    loaders: [
        { test: /\.json$/, loader: 'json-loader' },
        {
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['react', 'es2015', 'stage-0']
            }
        },
        { test: /\.css$/, loader: "css-loader" },
    ]
},

plugins: [new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    chunks: ['vendor'],
    filename: 'vendor.js',
    minChunks: Infinity
})
],

devtool: 'source-map',

node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
},

 target: 'web'
};

Answer 1

根据Webpack文档here，不建议使用CommonsChunkPlugin，并在版本4之后将其删除。其原因是-这可能是为什么它对您不起作用的原因，在异步块上它被证明是无效的，并且也难以使用（例如：当将child设置为true时，仅适用于直接孩子），因此配置不会包含具有共享模块的3级依赖项。

请改为选择SplitChunksPlugin。这应该可以解决您的问题。