Javascript React webpack config：是否可以在不重置插件阵列的情况下，仅为阵列中的一个插件替换配置？

我正在使用react应用程序重新布线插件进行构建。我有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;
}

但它不起作用。我有以下结果：

---

我可以只替换特定插件的选项而不重置react应用程序创建的所有插件吗？

我想你差不多成功了。但是

delete p

不是从数组中删除项的方法。您应该使用

.splice

，它可以从数组中删除项，同时添加项：

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

---

我想你差不多成功了。但是

delete p

不是从数组中删除项的方法。您应该使用

.splice

，它可以从数组中删除项，同时添加项：

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

---

instanceof接受的答案对我不起作用，当我试图替换

网页包livereload插件时，这确实起到了：

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

instanceof接受的答案对我不起作用，当我试图替换
网页包livereload插件时，这确实起到了：

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