webpackコード内の値をjsonファイルの値に置き換えます。

Question

react-intlを使用してアプリケーションをローカライズしています。私は次のようなjsonファイルを持っています：

{ 
    "en": { 
    "greeting": "Hello" 
    }, 
    "es": { 
    "greeting": "Hola" 
    } 
} 

メッセージを表示するコードは次のようになります。これはすべて動作し、必要な翻訳を表示します。

<FormattedMessage 
    id={ 'greeting' } 
    defaultMessage={ '__greeting__' } 
    values={{ 
     greeting: messages.greeting 
    }} 
/> 

ここでわかりにくい難しい部分があります。私はstring-replace-loaderを使用して、defaultMessageを自分のコードで見つけようとしています。私は、jsonファイルの対応する英語の値でこれらを埋めたいと思います。明らかに私は手動でdefaultMessagesのすべてを手動で入力することができますが、これはもっと面倒なことになりますので、私は私のためにこれを行うためにwebpackを使用できることを願っています。

{ 
    test: /\.(js|jsx)$/, 
    loader: require.resolve('string-replace-loader'), 
    query: { 
    search: '__', 
    replace: \\ want to replace with the relevant key from the json file \\ 
    } 
}, 

私はまた、しかし、これはJSXを壊し、html webpack pluginを使用して見てきました。

new HtmlWebpackPlugin({ 
    inject: true, 
    meta: config, 
    template: paths.appHtml, 
}), 

、次いで反応するコード内のWebPACKファイル内

。

defaultMessage={ <%= htmlWebpackPlugin.options.meta.en.greeting %>}

Answer 1

あなたはmultiple

const defaultMessages = require('./path/to/messages.json').en 

query: { 
     multiple: Object.keys(defaultMessages).map(key => ({ 
     search: `__${key}__`, 
     replace: defaultMessages[key] 
     })) 
} 

を使用して、すべて置換を追加しようとすることができます。しかし、私はこれが最善の選択肢であるかはわかりません。