React webpack config：是否可以仅替换数组中一个插件的配置，而无需重置一组插件？答案

【问题标题】：React webpack config: is it possible to replace config for only one plugin in array, without reset an array of plugins?React webpack config：是否可以仅替换数组中一个插件的配置，而无需重置一组插件？
【发布时间】：2019-11-26 07:05:03
【问题描述】：

我正在使用 react-app-rewired 插件进行构建。我有 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-app 创建的插件吗？

【问题讨论】：

标签： javascript reactjs webpack create-react-app

【解决方案1】：

instanceof 接受的答案对我不起作用，当我尝试替换 webpack-livereload-plugin 时，这样做了：

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

【讨论】：

你应该重新导入config-overrides.js文件中的相关插件。我认为您的解决方案更好:)

【解决方案2】：

我想你几乎成功了。但是delete p 不是从数组中删除项目的方法。您应该使用.splice，它可以从数组中删除项目并同时添加项目：

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

【讨论】：