Как выбрать файл RTL CSS, сгенерированный RTL CSS и LTR CSS

Question

Мы создаем веб-сайт для клиента, и клиенту требуется английская и арабская версии веб-сайта.

Мы используем infernojs @ 7 с webpack @ 4, и мы связываем cssтакже с использованием веб-пакета.

Мы применяем https://github.com/nicolashemonic/rtl-css-transform-webpack-plugin, чтобы мы получили две версии нашего выходного css-файла: версию RTL и версию LTR, наши имена файлов хэшированы для кеширования, очевидно.

Вот проблема: как выбрать во время выполнения между файлом rtl css и файлом ltr css, когда мы не знаем их имени (из-за хэша)?

Я думаюиспользования реактивного шлема в корневом компоненте, чтобы сделать что-то вроде

<link rel="stylesheet" href={this.state.lang==='ar' ? 'bunldename.rtl.css' : 'bundlename.css'}/>
<!-- we'll actually get lang from route but that's not the point-->

Моя единственная проблема - получить bundlename, я думал об использовании DefinePlugin, но не смог получить bundlename даже в webpack.config.js.

Вот мой конфиг веб-пакета:

const HtmlWebpackPlugin = require('html-webpack-plugin'),
    RtlCssPlugin = require('rtl-css-transform-webpack-plugin'),
    ExtractCssChunks = require('extract-css-chunks-webpack-plugin'),        
    HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin'),       
    path = require('path');

const commonPlugins = [ 
    new ExtractCssChunks({
        'filename': 'css/[name].[contenthash].css'
    }),
    new RtlCssPlugin({
        filename: 'css/[name].[hash].rtl.css'
    }),   
    new HtmlWebpackPlugin({
        'title': 'mytitle',
        'template': 'index.html',
        excludeAssets: /\.css/u
    }),
    new HtmlWebpackExcludeAssetsPlugin()
];
const productionPlugins = [ 
    ...
];

module.exports = (_env,argv) => ({ 
    'entry': './src/index.jsx',
    'output': {
        'path': path.resolve('../public'),
        'filename': 'js/main.[contenthash].js'
    },
    'plugins': argv.mode === 'development' ? commonPlugins : [...commonPlugins,...productionPlugins],
    'module': {
        'rules': [
            {
                'test': /\.(js|jsx)$/u,
                'use':
                {
                    'loader': 'babel-loader',
                    'options': {
                        'presets': ['@babel/preset-env'],
                        'plugins': [['babel-plugin-inferno', { 'imports': true }]]
                    }
                }
            },
            {
                'test': /\.css$/u,
                'use': [ExtractCssChunks.loader, 'css-loader']
            }
        ]
    },
    'devServer': {
        'host': '0.0.0.0',
        'historyApiFallback': true,
        'contentBase': './public',
        'publicPath': 'http://localhost:8080/'
    },
    'resolve': {
        'alias': {
            'inferno': (argv.mode === 'development')
                ? 'inferno/dist/index.dev.esm.js'
                : 'inferno/dist/index.esm.js',
            'react': 'inferno-compat',
            'react-dom': 'inferno-compat'
        }
    }
});