javascript - Webpack 4 代码拆分为每个路由生成单独的 vendor 文件

Question

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

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

在每个 Home、About 和 Topics 组件中，我从我的内部 npm 模块导入一个组件(让我们说 int-home, int-about 等)。

从“int-about”中导出{App as default}；

现在有了这个设置，webpack 会吐出与每个动态导入相对应的额外 vendor 包

我的 webpack 配置可能有什么问题？我怎样才能确保在我的构建中生成单个 vendor 包？下面是我的主要应用程序的 webpack 配置。

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'
        })
    ]
}

Answer 1

取自这个要点:

https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693#configurate-cache-groups

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