複数のロケールをサポートするangular2-webpack-pluginのi18n webpackプラグインの使用例が必要です

Question

prod envには次のwebpack configを使用しています。それはすべてのロケールのすべてのプラグインを実行するので、うまくいきますが、最適化されたコードではありません。たとえば、i18​​nプラグインがすべてのロケールに対して実行された後にのみコピープラグインを呼び出すのが理想的です。たとえば、main.bundle.jsエントリファイルのみを国際化したいとします。より最適化された設定を書いてください。

const helpers = require('./helpers'); 
const webpackMerge = require('webpack-merge'); 
const commonConfig = require('./webpack.common.js'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ProvidePlugin = require('webpack/lib/ProvidePlugin'); 
const DefinePlugin = require('webpack/lib/DefinePlugin'); 
const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin'); 
const IgnorePlugin = require('webpack/lib/IgnorePlugin'); 
const DedupePlugin = require('webpack/lib/optimize/DedupePlugin'); 
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'); 
const WebpackMd5Hash = require('webpack-md5-hash'); 


const ENV = process.env.NODE_ENV = process.env.ENV = 'production'; 
const HOST = process.env.HOST || 'localhost'; 
const PORT = process.env.PORT || 8080; 
const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, { 
    host: HOST, 
    port: PORT, 
    ENV: ENV, 
    HMR: false 
}); 

const I18nPlugin = require("webpack/node_modules/i18n-webpack-plugin"); 
var languages = { 
    "en" : null, 
    "hi": require("./locales/hi.json"), 
    "de": require("./locales/de.json") 
}; 

var path = require("path"); 
module.exports = function(env) { 
return Object.keys(languages).map(function(locale) { 

    return webpackMerge(commonConfig({env: ENV}), { 


    debug: false, 


    devtool: 'source-map', 


    output: { 


     path: helpers.root('dist'), 
     //path: helpers.root('dist/' + METADATA.title + '/static'), 


     filename: ((locale == "en")? "" : (locale +'.')) + '[name].[chunkhash].bundle.js', 


     sourceMapFilename: ((locale == "en")? "" : (locale +'.')) + '[name].[chunkhash].bundle.map', 


     chunkFilename: ((locale == "en")? "" : (locale +'.')) + '[id].[chunkhash].chunk.js' 

    }, 


    plugins: [ 
     new HtmlWebpackPlugin({ 
     template: 'src/index.html', 
     filename: 'index.' + ((locale == "en")? "" : (locale +'.')) +'html', 
     chunksSortMode: 'dependency' 
     }), 
     new I18nPlugin(
       languages[locale] 
      ), 

     new WebpackMd5Hash(), 



     new DefinePlugin({ 
     'ENV': JSON.stringify(METADATA.ENV), 
     'HMR': METADATA.HMR, 
     'process.env': { 
      'ENV': JSON.stringify(METADATA.ENV), 
      'NODE_ENV': JSON.stringify(METADATA.ENV), 
      'HMR': METADATA.HMR, 
     } 
     }), 
     new UglifyJsPlugin({ 
     beautify: false, //prod 
     mangle: { screw_ie8 : true, keep_fnames: true }, //prod 
     compress: { screw_ie8: true }, //prod 
     comments: false //prod 
     }), 


     new NormalModuleReplacementPlugin(
     /angular2-hmr/, 
     helpers.root('config/modules/angular2-hmr-prod.js') 
    ), 



    ], 


    tslint: { 
     emitErrors: true, 
     failOnHint: true, 
     resourcePath: 'src' 
    }, 

    *ngFor 
    htmlLoader: { 
     minimize: true, 
     removeAttributeQuotes: false, 
     caseSensitive: true, 
     customAttrSurround: [ 
     [/#/, /(?:)/], 
     [/\*/, /(?:)/], 
     [/\[?\(?/, /(?:)/] 
     ], 
     customAttrAssign: [/\)?\]?=/] 
    }, 

    /* 
    * Include polyfills or mocks for various node stuff 
    * Description: Node configuration 
    * 
    * See: https://webpack.github.io/docs/configuration.html#node 
    */ 
    node: { 
     global: 'window', 
     crypto: 'empty', 
     process: false, 
     module: false, 
     clearImmediate: false, 
     setImmediate: false 
    } 

    }); 


}); 


} 

Answer 1

私がAngular 2プロジェクトのローカリゼーションを実装していたとき、私はサービスを作りました。ロケールとキーを渡し、ローカライズされた文字列を返します。私は、ウェブパックプラグインとしてローカライゼーションを追加する利点が得られるかどうかはわかりません。

Answer 2

は使いintl-webpack-pluginがはるかに簡単なようだ：

module: { 
    rules: [ 
     { test: /\.(intl|i18n|yml|yaml)$/i, 
     use: [ 
      IntlPlugin.loader() 
     ] 
     }, 
    ] 
    }, 
    plugins: [ 
    new IntlPlugin({ 
     search: [ './locales/**/*.json' ] 
    })