React webpack config: is it possible to replace config for only one plugin in array, without reset an array of plugins?

Question

I'm using react-app-rewired plugin for build. I have config-overrides.js:

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = function override(config, env) {
    if( !config.plugins ) {
        config.plugins = [];
    }

    const miniCssOptions = {
        filename: "[name].[hash].css"
    }
    let miniCssAdded = false;

    if( config.plugins.length ) {
        config.plugins.forEach( p => {
            if( p instanceof MiniCssExtractPlugin) {
                delete p;
                p = new MiniCssExtractPlugin( miniCssOptions );
                miniCssAdded = true;
            }              
        })
    }

    if( !miniCssAdded ) {
        config.plugins.push( new MiniCssExtractPlugin( miniCssOptions ) );
    }
    
    config.plugins.push( new CleanWebpackPlugin() );

    config.plugins.push( new HtmlWebpackPlugin({
        title: 'Caching',
    }) );
    

    config.output.filename ='static/js/[name].[hash].js';
    config.output.chunkFilename ='static/js/[name].[hash].js';
    config.output.path = path.resolve(__dirname, 'build');
    
    config.optimization.splitChunks= {
        cacheGroups: {
            vendor: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendors',
                chunks: 'all',
            }
        }
    }      

    return config;
}

But it doesn't work. I have the following results:

Can I replace options only for specific plugin without reseting all plugins created by react-app?

Answer 1

I think you almost made it. But delete p is NOT a way to delete item from an array. you should use .splice , which can delete items from array and add items in the meantime:

    config.plugins.forEach( (p,i) => {
        if( p instanceof MiniCssExtractPlugin) {
            //delete p;
            config.plugins.splice(i,1, new MiniCssExtractPlugin( miniCssOptions ));
        }              
    })

Answer 2

The accepted answer with instanceof did not work for me, when i tried to replace webpack-livereload-plugin , this did:

config.plugins.forEach((p, i) => {
    if(p.constructor.name === 'LiveReloadPlugin') {
        config.plugins.splice(i, 1, new LiveReloadPlugin({
            port: 35729
        }));
    }
});