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

Question

我正在使用 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 创建的插件吗？

标签： javascriptreactjswebpackcreate-react-app

Answer 1

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

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