Javascript Webpack 4代码拆分为每个路由生成单独的供应商文件

我正在尝试使用代码拆分的Webpack4（4.0.1）。我使用动态加载来加载React组件。React组件反过来从内部npm模块导入组件。例如， 在我的应用程序中，我有以下路线

<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />

摘自本要点：

---

我也想知道这一点。你现在有答案了吗？看来Webpack 4将通用代码提取到了供应商文件中，这样在你更改组件代码后，缓存仍然可以工作。

chunks:“all”

是所需的关键更改

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    entry :'./src/index.js',
    output : {
        filename: '[name].js',
        chunkFilename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath:'dist/',
        library : '',
        libraryTarget:'umd'
    },
    resolve:{ 
        extensions: ['.', '.js', '.jsx']
    },
    mode : process.env.NODE_ENV == 'production' ? 'production' : 'development',
    module : {
        rules : [
            { 
                test: /\.css$/, 
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: {
                        loader:'css-loader',
                        options:{
                            minimize : true,
                            sourceMap: true,
                            modules:true,
                            localIdentName: '--[hash:base64:8]'
                        }
                    }
                })
            },
            { test: /\.jsx?$/, use: 'babel-loader' }     
        ]
    },
    optimization:{
        splitChunks:{
            cacheGroups:{
                vendor: {
                    chunks: 'initial',
                    test: path.resolve(__dirname, 'node_modules'),
                    name: 'vendors',
                    enforce: true,
                },
            }, 
        }
    },
    plugins:[
        new ExtractTextPlugin({
            filename:"[name].css",
            allChunks:true
        }),
        new webpack.EnvironmentPlugin({
            NODE_ENV: process.env.NODE_ENV,
        }),
        new BundleAnalyzerPlugin({
            analyzerMode : 'static'
        })
    ]
}

splitChunks: {
    cacheGroups: {
        commons: {
            test: /[\\/]node_modules[\\/]/
            name: "vendors",
            chunks: "all"
        }
    }
}