Игнорировать файл из веб-пакета, но динамически загружать из React

Question

Я боролся со следующей настройкой и мне интересно, делал ли кто-нибудь что-то подобное.

Примечание : Я собирался использовать ответные скрипты для всей сборки, так как она работает нормально, но я обнаружил, что не могу разбивать файлы на блоки, такие как веб-пакет. Только упомяните это, если я ошибаюсь.

У меня есть простая настройка веб-пакета для реакции следующим образом.

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const outputDir = '../wwwroot/'
const entry = './src/index.js'
const cssOutput = 'site.css'

module.exports = (env) => {
    return [{
        entry: {
            main: entry
        },
        output: {
            path: path.join(__dirname, outputDir,"js"),
            filename: '[name].js'
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: 'babel-loader',
                    exclude: path.resolve(__dirname, 'node_modules/')
                },
                {
                    test: /\.(scss|css)$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        {
                            loader: "css-loader",
                            options: {
                                minimize: {
                                    safe: true
                                }
                            }
                        },
                        {
                            loader: "postcss-loader",
                            options: {
                            },
                        },
                        {
                            loader: "sass-loader",
                            options: {}
                        }
                    ]
                },

                {
                    "test": /\.jpg$|\.png$/,
                    "loader": "file-loader?name=../images/[name].[ext]"
                },
                {
                    "test": /\.html$|\.ico$|\.config|\.txt$/,
                    "loader": "file-loader?name=[name].[ext]"
                },
                {
                    "test": /\.(eot|otf|woff|woff2|ttf|svg)$/,
                    "loader": "url-loader?limit=100000"
                }
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: '../css/[name].css'
            })
        ],
        // optimization
        optimization: {
            splitChunks: {
                cacheGroups: {
                    default: false,
                    vendors: false,

                    // vendor chunk
                    vendor: {
                        // name of the chunk
                        name: 'vendor',

                        // async + async chunks
                        chunks: 'all',

                        // import file path containing node_modules
                        test: /node_modules/,

                        // priority
                        priority: 20
                    },

                    // common chunk
                    common: {
                        name: 'common',
                        minChunks: 2,
                        chunks: 'all',
                        priority: 10,
                        reuseExistingChunk: true,
                        enforce: true
                    }
                }
            }
        }
    }]
}

Я загружаю файл css динамически в компонент реагирования следующим образом.

  if (lng === "ar") {
    require("../../bootstrap-rtl.min.css");
  }

Кажется, файл начальной загрузки куплен в css-файле комплекта. Это портит компоновку для компонентов, где RTL не требуется.

Итак, я пытаюсь найти способ игнорировать этот файл и поместить его в компоненте load при необходимости.