Webpack Awesome i18n Plugin

Write translations key in one single file and let us split it for you!

Install

for webpack 5 $ npm i -D @acciosolutions/[email protected]

for webpack 4 $ npm i -D @acciosolutions/[email protected]

Use

webpack config

const AwesomeI18NPlugin = require('@acciosolutions/webpack-awesome-i18n-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './index.js',
  output: {
    path: path.resolve("dist/")
  },
  plugins: [
    new AwesomeI18NPlugin({
        // path to your translate tokens file
        file: path.resolve('./i18n/i18n.json'),
        // output dir of languages json
        localesDir: 'locales',

        // optionally you can create an typescript enum with each transkation key for type assistence
        genKeysTypes: true,
        keysTypesFile: path.resolve('./i18n/keys.ts')
    }),
  ],
};

i18next config example

import { initReactI18next } from 'react-i18next';

import i18n from 'i18next';
import HttpApi from 'i18next-http-backend';

i18n
  .use(HttpApi)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    lng: 'pt-BR',
    fallbackLng: 'en-US',

    interpolation: {
      escapeValue: false,
    },
    backend: {
      loadPath: '/locales/{{lng}}.json',
    },
  });

Single token file

// i18n/i18n.json
{
  {
    "languages": ["pt-BR", "en-US"],
    "resources": {
      "app.header.home": {
        "pt-BR": "Inicio",
        "en-US": "Home"
      },
      "app.header.search": {
        "pt-BR": "Buscar",
        "en-US": "Search"
      },
    }
  }
}

will result in two jsons:

// ./dist/locales/pt-BR.json
{
    "app": {
        "header": {
            "home": "Inicio",
            "search": "Buscar",
            "add-post": "Nova publicao",
            "save-post": "Nova publicao"
        }
    }
}
// ./dist/locales/en-US.json
{
    "app": {
        "header": {
            "home": "Home",
            "search": "Search",
            "add-post": "New Post",
            "save-post": "New Post"
        }
    }
}