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}
};
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}`);
})
locales.js on app runtime?Any help would be much appreciated.
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)