I am trying webpack 4 (4.0.1) with code splitting. I am using dynamic loading to load React ponents.The react ponents, in turn, are importing ponents from internal npm modules. For instance, In my app I have the following routes.

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

In each Home, About and Topics ponents, I am importing a ponent from my internal npm module( let us say int-home, int-about etc ).

export { App as default } from 'int-about';

Now with this setup, webpack is spitting out extra vendor bundles corresponding to each dynamic import

What could be possibly wrong with my webpack config? How can I make sure that single vendor bundle is churned out in my build? Below is the webpack config for my main app.

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

I am trying webpack 4 (4.0.1) with code splitting. I am using dynamic loading to load React ponents.The react ponents, in turn, are importing ponents from internal npm modules. For instance, In my app I have the following routes.

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

In each Home, About and Topics ponents, I am importing a ponent from my internal npm module( let us say int-home, int-about etc ).

export { App as default } from 'int-about';

Now with this setup, webpack is spitting out extra vendor bundles corresponding to each dynamic import

What could be possibly wrong with my webpack config? How can I make sure that single vendor bundle is churned out in my build? Below is the webpack config for my main app.

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

• javascript
• reactjs
• webpack

• I am also wondering this. Do you have an answer now? – Kevin Commented Mar 21, 2018 at 5:49
• Well, it seems like Webpack 4 extract the mon code to the vendor file, which can allow the cache still work after you change your code for the ponent. – Kevin Commented Mar 21, 2018 at 6:01

1 Answer 1

Taken from this gist:

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

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