webpack-multilang-i18n-plugin v2.0.7

npm i -D webpack-multilang-i18n-plugin

This plugin is an adaptation of the original i18n Webpack plugin for creating bundles with translations baked in. This plugin solves the problem of slow compilation times for multiple languages by moving the translation process later in the Webpack compilation.

In order to leverage the functionality of this plugin, at least one of your output filenames will need to use the substitution token [language] (in a manner similar to other tokens explained here). For example, you might have an output definition that looks like the following:

output: {
  path: utils.resolvePath('public/js/dist'),
  filename: `[name].[language].js`
}

In this particular case, if you run the plugin with languages en and fr, you will end up with files [name].en.js and [name].fr.js for each of the generated assets.

plugins: [
  ...
  new I18nPlugin(localizationObj, optionsObj)
],

• localizationObj: a multi-language dictionary, keyed by language code, each containing it's own key/value dictionary, ex. {"en": {"string1": "Welcome", "string2": "Goodbye"}, "fr": {"string1": "Bienvenue", "string2": "Au revior"}}
• optionsObj.functionName: the default value is __, you can change it to other function name.
• optionsObj.failOnMissing: the default value is false, which will show a warning message, if the mapping text cannot be found. If set to true, the message will be an error message.
• optionsObj.hideMessage: the default value is false, which will show the warning/error message. If set to true, the message will be hidden.

The plugin operates by appending multiple files to each chunk, which can cause some conflicts with the Webpack manifest plugin. The solution is to use the filter option to manually generate multiple manifests:

config.plugins = { new MultiLangPlugin(localizationObj) };
Object.keys(localizationObj).forEach((lang) => {
    config.plugins.push(new ManifestPlugin({
        fileName: `manifest.${lang}.json`,
        filter: file => file.path.indexOf(`.${lang}.`) >= 0,
    }));
});