Skip to content

Instantly share code, notes, and snippets.

@tricoder42
Last active May 29, 2019 16:29
Show Gist options
  • Save tricoder42/45c25062ecf0bfb08765e2413beaadcf to your computer and use it in GitHub Desktop.
Save tricoder42/45c25062ecf0bfb08765e2413beaadcf to your computer and use it in GitHub Desktop.
Webpack plugin which injects code, module dependency and async context to each chunk

I'm writing a webpack plugin, which should generate message catalogs for each chunk.

✅ I know how to split main message catalog by inspecting modules inside chunk.

In build folder, I have:

index.js
index.en.js
index.cs.js
0.js
0.en.js
0.cs.js

where [chunkName].[locale].js is just exported JSON.


✅ I have a file, which knows how to load these message catalogs. Path to this module is passed in webpack plugin. The file looks like this:

// i18n.load.js
import { i18n } from "./i18n.core";

export default function load(request) {
  const locale = i18n.locale;
  const catalog = request(locale);
  i18n.load(locale, catalog);
}

💡 I need to add following lines on the top of each chunk, which contains internationalized messages:

const load = require('./i18n.load')
const request = locale => import(`./CHUNK_NAME.${locale}.json`);
load(request)

For that I need to add ./i18n.load module as a dependency and ./CHUNK_NAME.${locale}.json as an async context.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment