CODEWITHSUNDEEP
angularwebpack
cusejuice
cusejuice

Reputation: 10681

Dynamically load only a subset of angular-i18n locale files using Webpack

Using Webpack 2.3.3 and Babel-loader

I'm new to using Webpack and am trying to bundle angular-i18n locale files using webpack. I have a config object which lists out the app's supported locales. For example:

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

When I install angular-i18n library, it outputs ALL the locales in node_modules/angular-i18n/ directory. For example:

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

webpack.config.js (simplified for post)

  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. Is there a way to dynamically load just these specific angular-locale files based on the supportedLocales and include it in the main.js bundle? For example:

index.js

// This doesn't work
_.each(SUPPORTED_LOCALES, function(locale) {
    require(`angular-i18n/angular-locale_${locale.id}`);
})
  1. Would it be possible to bundle just these specific angular-locale files and include it as a new file locales.js on app runtime?

Any help would be much appreciated.

Upvotes: 2

Views: 1021

Answers (1)

Johannes Reuter
Johannes Reuter

Reputation: 3547

If you explicitly require each locale with a string literal, webpack should understand that and only include the necessary modules:

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

Your style of require-ing forces webpack to include all possible matches of the template-string into the bundle as it doesn't execute your code. See this answer for a more detailed explanation of what's going on: webpack dynamic module loader by require (alternatively direct link to the docs: https://webpack.js.org/guides/dependency-management/#require-with-expression)

Upvotes: 1

Related Questions