config/webpack/environment.js

environment.js

const { environment } = require('@rails/webpacker')

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

environment.plugins.prepend("CleanWebpackPlugin", new CleanWebpackPlugin());

// default config from https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks
environment.splitChunks((config) =>
    Object.assign({}, config, {
        optimization: {
            splitChunks: {
                chunks: 'all', // changed to all
                minSize: 30000,
                maxSize: 0,
                minChunks: 1,
                maxAsyncRequests: 30, // changed
                maxInitialRequests: 30, // changed
                automaticNameDelimiter: '~',
                automaticNameMaxLength: 30,
                name: true,
                cacheGroups: {
                    vendors: {
                        test: /[\\/]node_modules[\\/]/,
                        priority: -10
                    },
                    default: {
                        minChunks: 2,
                        priority: -20,
                        reuseExistingChunk: true
                    }
                }
            }
        },
    })
);

module.exports = environment