react loadable在webpack打包成了一个文件,没有按路由打包

Question

import Loadable from 'react-loadable';
const Loading = () => <div>Loading...</div>;
const Store = Loadable({
    loader: () => import('Containers/Store'),
    loading: Loading
});
const Home = Loadable({
    loader: () => import('Containers/Home'),
    loading: Loading
});
const HeadlineHome = Loadable({
    loader: () => import('Containers/HeadlineHome'),
    loading: Loading
});

打包成了两个文件:

应该是三个文件才对,哪位同学知道是怎么回事?
经过调试发现跟路由写法没有关系
是webpack的配置问题吗?
const webConfig = {

devtool: 'inline-source-map',
context: path.resolve(__dirname, '..'),
entry: {
    webbundle: './entry/webEntry.js',
    webstyle:'./src/styles/pcstyles.scss',
    webfontstyle1:'./src/fonts/iconfont.scss',
    webfontstyle2:'./src/fonts2/iconfont.scss',
    webawesome:'font-awesome/scss/font-awesome.scss',
    webvendor: [
        'react',
        'react-dom',
        'react-redux',
        'react-router-dom',
        'react-router',
        'react-router-redux',
        'redux',
        'redux-logger',
        'redux-thunk',
        'font-awesome-loader',
        'whatwg-fetch'
    ]
},
output: {
    path: path.resolve(__dirname, '..', './dist/client'),
    filename: '[name][hash:8].js',
    chunkFilename: '[name][chunkhash:8].js',
    publicPath: '/'
},
module: {
    rules: [{
            test: /\.(js|jsx|es6)$/,
            exclude: /node_modules/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: ['es2015', 'stage-0', 'react'],
                    plugins: ['transform-runtime', 'add-module-exports', 'syntax-dynamic-import'],
                    cacheDirectory: true
                }
            }]
        }, {
            test: /\.scss$/,
            use: [
                'style-loader',
                'css-loader',
                {
                    loader:'postcss-loader',
                    options: {
                        includePaths: ["absolute/path/a", "absolute/path/b"],
                        plugins: function() {
                            return [
                                require('autoprefixer')()
                            ];
                        }
                    }
                },
                {
                    loader:'sass-loader',
                    options: {
                        importer: globImporter()
                    }
                }
                
            ]
        },{
            test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            // Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin
            // loader: "url?limit=10000"
            use: ["url-loader"]
        },{
            test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
            use: ['file-loader']
        },{
    　　　　　test: /\.(png|jpg|gif)$/,
    　　　　　loader: 'url-loader?limit=8192'
    　　 },{
    　　　　　test: /avatar\/default/,
    　　　　　loader: 'url-loader?limit=8192'
    　　 }, {
            test: /\.html$/,
            use: ['html-loader?minimize=true&removeAttributeQuotes=false']
        }
    ]
},
resolve:{
    extensions: [".js", ".json",".jsx",".js.jsx",".es6"],
    alias: alias,
    modules:[path.resolve(__dirname, "src/images"),"node_modules"]
},
plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
        name: ['webvendor','webstyle','webfontstyle1','webfontstyle2','webawesome'],
        filename: '[name][chunkhash:8].js'
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'webmanifest'
    }),
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
        'process.env.SERVER_STATUS': JSON.stringify(process.env.SERVER_STATUS)
    }),
    new HtmlWebpackPlugin({
        filename: path.resolve(__dirname, '../dist/views/webIndex.html'),
        template: path.resolve(__dirname, '../entry/webIndex.html'),
        favicon: path.resolve(__dirname, '../favicon.ico')
    }),
    new ProgressBarWebpackPlugin(),
    new ExtractTextPlugin({
        filename: '[name][contenthash:8].css',
        allChunks: true
    }),
    new webpack.ProvidePlugin(provide),
    new webpack.NormalModuleReplacementPlugin( //解决node-fetch的警告
        /\/iconv-loader$/, 'node-noop'
    ),
    //压缩css
    new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessor: require('cssnano'),
        cssProcessorOptions: {discardComments: {removeAll: true}},
        canPrint: true
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    }),
    //分片优化，开启后会根据设定来合并分片代码
    new webpack.optimize.AggressiveMergingPlugin(),
    //设定分片限制
    new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 35,
        minChunkSize: 1000
    }),
    //设定最小分片条件
    new webpack.optimize.MinChunkSizePlugin({
        minChunkSize: 10000
    })
]

}

Answer 1

找了一下午,貌似是分片优化配置的问题

//分片优化，开启后会根据设定来合并分片代码
new webpack.optimize.AggressiveMergingPlugin(),
//设定分片限制
new webpack.optimize.LimitChunkCountPlugin({
    maxChunks: 35,
    minChunkSize: 1000
}),
//设定最小分片条件
new webpack.optimize.MinChunkSizePlugin({
    minChunkSize: 10000
})