Question

我们正在为客户建立一个网站，客户需要该网站的英语和阿拉伯语版本。

我们将infernojs @ 7与webpack @ 4一起使用，并且还将CSS与webpack捆绑在一起。

我们正在应用https://github.com/nicolashemonic/rtl-css-transform-webpack-plugin，以便获得输出css文件的两个版本：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'
        }
    }
});

如何在rtl css生成的rtl css文件和ltr css之间进行选择

0 个答案: