css - rtl css と ltr css で生成された rtl css ファイルの選択方法

Question

私たちは顧客のためにウェブサイトを構築しており、顧客はウェブサイトの英語版とアラビア語版の両方を要求しています。

webpack@4 で infernojs@7 を使用しており、webpack を使用して css もバンドルしています。

https://github.com/nicolashemonic/rtl-css-transform-webpack-pluginを適用して、出力 css ファイルの 2 つのバージョン (RTL バージョンと LTR バージョン) を取得します。ファイル名は明らかにキャッシュ用にハッシュされます。

問題は次のとおりです。(ハッシュのために)名前がわからない場合に、実行時にrtl cssファイルとltr cssファイルを選択する方法は?

ルートコンポーネントでreact-helmetを使用して、次のようなことを行うことを考えています

<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。

これが私のwebpack構成です：

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'
        }
    }
});