Question

我正在尝试使用代码拆分的webpack 4（4.0.1）。我正在使用动态加载来加载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等）。

从＆＃39; int-about＆＃39;;

导出{App as default}

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

我的webpack配置可能出现什么问题？如何确保在我的构建中生成单个供应商捆绑包？下面是我的主应用程序的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"
        }
    }

}

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

1 个答案: