供应商代码即使在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之后被删除。原因可能是-这可能是为什么它不适用于你，它已经被证明在异步区块上效率低下，而且也很难使用(例如:当子模块设置为真时，这只适用于直接子模块)，因此具有共享模块的3级依赖项不会包含在配置中。

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