2

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

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

我们正在应用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无法进入. bundlenamewebpack.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'
        }
    }
});
4

0 回答 0