Question

使用Webpack 2.3.3和Babel-loader

我是新手使用Webpack并尝试使用webpack捆绑angular-i18n语言环境文件。我有一个配置对象，列出了应用程序支持的语言环境。例如：

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

当我安装angular-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}
  };

有没有办法根据supportedLocales动态加载这些特定的角度区域设置文件并将其包含在main.js捆绑包中？例如：

index.js

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

是否可以捆绑这些特定的角度区域设置文件并将其作为新文件locales.js包含在应用运行时上？

非常感谢任何帮助。

Answer 1

如果您使用字符串文字明确require每个语言环境，webpack应该理解并且只包含必要的模块：

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

您require的样式强制webpack将模板字符串的所有可能匹配包含在包中，因为它不会执行您的代码。请参阅此答案，详细了解正在进行的操作：webpack dynamic module loader by require（或直接链接到文档：https://webpack.js.org/guides/dependency-management/#require-with-expression）

使用Webpack动态加载angular-i18n语言环境文件的子集

1 个答案: