webpack i18n loader like require.js i18n plugin
JavaScript CoffeeScript
Clone or download
Latest commit ed370e6 Jul 2, 2018



Travis branch npm

Webpack i18n loader helps your projects to process internationalization (i18n).

It's quite similar to require.js i18n plugin.


  • Fully compatitable with webpack 1/2/3/4
  • Works with language packages. (similar to require.js)
  • Support CommonJS/AMD/ESM module and .json files, and more, .coffee files
  • Auto init current language via html[lang] attribute or global varible
  • Switch current language at runtime
  • Enable/Disable language packages via queries


npm install amdi18n-loader


First look at require.js i18n plugin's docs here.

The structure of language packages are like this:

  • lang.js
  • zh-cn/lang.js
  • zh-hk/lang.js


    // root means the common language package
    // we have the language packages below:

zh-cn/lang.js example:

    // please note: no wrapper object here!
    HELLO:'hello in zh-cn'

Then use it like this:


    // By default, it will lookup `window._i18n.locale`,
    // If not found, it will try to use the html[lang] attribute,
    // For example: <html lang="en"> then language `en` was used,
    // If nothing found, `root` was used.
    // You can manully change the language by
    // `amdi18n.init(language)`;



Advanced Usage

Enable/Disable language packages

You can pass queries to enable or disable some langs.

// We use commonjs now. It matters nothing.
var lang = require('amdi18n-loader?enable=[zh-cn]!');

// It's not ok to use zh-hk now!

The code below behaviors the same:

// We use commonjs now. It matters nothing.
// Notice: we use `|` to as separator,
// Because webpack will break the comma.
var lang = require('amdi18n-loader?disable=[zh-hk|en-us]!');

// It's not ok to use zh-hk now!

It's ok to use both enable and disable, but if any one disables a lang, the lang will not be usable. You can decide which to use by the length of list.

Expose Root Object

In some case, accessing root object is required (#19). You can pass a query expose-root to expose the root object.



If you choose to use .json files as your lang files in webpack 4+, You need to specify the type of json files, otherwise webpack will try to parse the final script content as JSON, and throws errors.

// in module.rules
    // to avoid affecting other json files
    // you'd better specify the lang files only, 
    test: /\.json$/,
    type: 'javascript/auto'


v0.8.0 (2018-07-01)

  • Support webpack 4.
  • Support ESM modules in lang files. (export default {}). #16
  • Add a config to expose the root object. #19
  • Support using in global config (e.g. webpack.config.js) and passing options.
  • Better auto test for Node 7/8/10 and webpack 1/2/3/4.

v0.7.0 (2018-03-20)

  • Support functions in lang files. #20 (By ggriffithsIDBS)

v0.6.2 (2017-10-16)

  • Fix: failed to fallback to root. #17

v0.6.1 (2017-06-29)

  • Add lang files to webpack dependencies, so they can be watched and live-reloaded. See #15. (By jou)

v0.6.0 (2017-06-11)

  • Add a type of format support (for require.js i18n plugin). See #14.

v0.5.2 (2017-02-07)

  • Fix: multi values in enable / disable queries invalid. #10
  • If a lang specified in enable, no longer required to specify in root.

v0.5.1 (2017-01-14)

  • Fix: AMD lang file without factory function not working. #8

v0.5.0 (2017-01-13)

  • Add enable and disable queries. #6
  • Detect default language by html[lang] attribute. #7
  • Rewrite the method that extract language definitions.
  • Add testing & travis CI.

v0.4.0 (2016-01-18)

  • Support .coffee language files. (By Mullerzs)

v0.3.2 (2015-12-15)

  • Fix bug using in UMD mode. (By Rick)

v0.3.1 (2015-12-15)

  • Fix bug on IE. (By Rick)

v0.3.0 (2015-12-14)

  • Support load CommonJS module and json file. (By Rick)

v0.2.0 (2015-10-15)

  • Auto init.

v0.1.0 (2015-10-14)

  • First release.