使用Webpack动态加载角-i18n区域设置文件的一个子集。

Question

使用Webpack 2.3.3和Babel-装载机

我刚开始使用webpack，我正尝试用Webpack来捆绑ange-i18n地区文件。我有一个config对象，它列出了应用程序支持的区域设置。例如：

var supportedLocales = {
  'FR': {
    currency: 'EUR',
    id: 'fr-fr'
  },
  'GB': {
    currency: 'GBP',
    id: 'en-gb',
  },
  'US': {
    currency: 'USD',
    id: 'en-us'
  }
}

安装角-i18n库时，它会输出node_modules/angular-i18n/目录中的所有区域设置。例如：

node_modules/
  |_ angular-i18n/
     |_ angular-locale_en-gb.js
     |_ angular-locale_en-us.js
     |_ angular-locale_fr-fr.js
     |_ ...

webpack.config.js (简化为员额)

  module.exports = {
    context: path.join(config.appDir, '/client/assets'),
    entry: {
      main: [
        './js/index.js'
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        'SUPPORTED_LOCALES': JSON.stringify({
          supportedLocales
        })
      }),
    module: {..etc}
  };

1. 是否有一种方法可以基于supportedLocales动态加载这些特定的角度区域设置文件并将其包含在main.js包中？例如：

index.js

// This doesn't work
_.each(SUPPORTED_LOCALES, function(locale) {
    require(`angular-i18n/angular-locale_${locale.id}`);
})

1. 是否有可能仅仅捆绑这些特定的角度区域设置文件，并将其作为一个新的文件locales.js在应用程序运行时？

任何帮助都将不胜感激。

Answer 1

如果您使用字符串文字显式地require每个区域设置，webpack应该理解这一点，并且只包括必要的模块：

require('angular-i18n/angular-locale_fr-fr');
require('angular-i18n/angular-locale_en-gb');
// ...

您的require-ing风格迫使webpack将模板字符串的所有可能匹配包含到包中，因为它不执行您的代码。有关所发生的事情的更详细说明，请参见这个答案：webpack dynamic module loader by require (或者直接链接到docs：https://webpack.js.org/guides/dependency-management/#require-with-expression)