# webpack-easyi18n

> Go from gettext catalog (.po files) to embeded localization in your Webpack bundles

Latest version **0.6.1** (published 2026-01-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install webpack-easyi18n
pnpm add webpack-easyi18n
yarn add webpack-easyi18n
bun add webpack-easyi18n
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.6.1 |
| Published | 2026-01-19 |
| First published | 2021-04-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4.3.0 <5.0.0 \|\| >=5.10 |
| Dependencies | 1 |
| Unpacked size | 32.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Andrew Beaven |
| Maintainers | andrewsimplydating, boiko.s, ajbeaven |
| Keywords | webpack, i18n |

## Links

- npm: https://www.npmjs.com/package/webpack-easyi18n
- Repository: https://github.com/SimplyDating/webpack-easyi18n
- Homepage: https://github.com/SimplyDating/webpack-easyi18n#readme
- Issues: https://github.com/SimplyDating/webpack-easyi18n/issues
- npm.io page: https://npm.io/package/webpack-easyi18n

## Dependencies (1)

- [i18next-conv](https://npm.io/package/i18next-conv.md) ^16.0.0

## Alternatives

- [messageformat](https://npm.io/package/messageformat.md) — 329.7K weekly downloads
- [@mintlify/scraping](https://npm.io/package/@mintlify/scraping.md) — 294.8K weekly downloads
- [@mintlify/previewing](https://npm.io/package/@mintlify/previewing.md) — 209.5K weekly downloads
- [@mintlify/prebuild](https://npm.io/package/@mintlify/prebuild.md) — 209.5K weekly downloads
- [@mintlify/link-rot](https://npm.io/package/@mintlify/link-rot.md) — 206.3K weekly downloads

## Recent versions

- 0.6.1 (latest) — 2026-01-19
- 0.6.0-rc.1 (alpha) — 2026-01-19
- 0.6.0 — 2026-01-19
- 0.6.0-rc.0 — 2026-01-18
- 0.5.2 — 2025-12-19
- 0.5.1 — 2025-12-19
- 0.5.0 — 2025-12-19
- 0.4.0 — 2025-12-18
- 0.3.10 — 2025-06-24
- 0.3.9 — 2022-07-11
- 0.3.8 — 2022-07-07
- 0.3.7 — 2021-07-14
- 0.3.6 — 2021-07-11
- 0.3.5 — 2021-06-30
- 0.3.4 — 2021-06-24
- … 16 more at https://npm.io/package/webpack-easyi18n/versions

## README

# webpack-easyi18n
### Go from [gettext](https://en.wikipedia.org/wiki/Gettext) catalog (.po files) to embeded localization in your Webpack bundles.

```bash
npm install --save-dev webpack-easyi18n
```
Designed for use with [EasyI18n].

### Usage

To localize text in your application, surround your strings with [[[ and ]]] markup characters to mark them as translatable. We call these snippets 'nuggets':

```js
document.write("[[[Login using]]]");
```

Make your translations (for example using [Poedit](https://poedit.net/)) to create the .po files

Add the easy plugin to your Webpack config (notice the 'Locales' variable that indicates language/.po location):

```js
const Path = require("path");
const Webpack = require("webpack");
const EasyI18nPlugin = require("webpack-easyi18n");

var Locales = {
    "en-gb": null, // Your application default language
    "pt-br": "pt-BR/messages.po"
};

module.exports = Object.keys(Locales).map(function(locale) {

    var plugins = [];

    return {
        entry: Path.join(__dirname, "src", "index"),
        devtool: "source-map",
        output: {
            filename: Locales[locale] === null ? "js/[name].[hash].js" : "js/[name].[hash]." + locale + ".js",
            path: Path.join(__dirname, "dist"),
            publicPath: ""
        },
        plugins: plugins.concat([
            new EasyI18nPlugin([locale, Locales[locale]], {
                srcPath: Path.join(__dirname, "./src"),
                localesPath: Path.join(__dirname, "./Locale")
            })
        ])
    };
});

### React / JSX support

This plugin transforms nuggets at **source level** (via an injected webpack loader), so nuggets can span JSX text, `{expressions}`, and even nested JSX elements.

Example:

```jsx
<p>
  [[[Just {changeStatusBtn} to change your status.]]]
</p>
```

Internally this becomes a translated JSX children sequence rather than a single string, so placeholders like `%0` can be reordered per-locale without breaking React.
```

### Options

|Name|Type|Description|
|:--:|:--:|:----------|
|**`srcPath`**|`{String}`|Directory that should be used to locate your source files with strings for replacement _(required)_|
|**`localesPath`**|`{String}`|Directory containing the po files as referenced by 'Locales'  _(required)_|
|**`alwaysRemoveBrackets`**|`{Boolean}`| If alwaysRemoveBrackets is true and a nugget is missing a translation, then the original string is retained but the brackets are removed _(default:false)_|
|**`warnOnMissingTranslations`**|`{Boolean}`| If warnOnMissingTranslations is true a warning will be displayed on build if a nugget is missing a translation _(default:true)_|
|**`excludeUrls`**|`{String[]}`| If a filepath contains any of the strings contained in this array, it will not be processed _(default:null)_|
|**`includeUrls`**|`{String[]}`| If a filepath does not contains any of the strings contained in this array, it will not be processed _(default:null)_|

A 'webpack-easyi18n-temp' directory beneath you locales directory is created on each Webpack build. There is no need to deploy this directory to production and can be removed, for example using rimraf and the WebpackShellPlugin:

```js
new WebpackShellPlugin({ onBuildStart: ['echo "Webpack Start"'], onBuildEnd: ['rimraf ./locales/webpack-easyi18n-temp'] })
```

---
_Source: https://npm.io/package/webpack-easyi18n · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._