Question

我正在使用以下webpack配置为prod env。虽然它工作正常，但它不是最优化的代码，因为它运行所有语言环境的每个插件。例如，理想情况下，只有在为所有语言环境运行i18n插件之后才应调用复制插件。或者例如假设我想仅将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' ]
    })

需要使用支持多种语言环境的angular2-webpack-plugin的i18n webpack插件的工作示例

2 个答案: