Webpack Runtime

The Webpack runtime creates a container for client-side TypeScript applications powered by the Webpack bundler.


You can install the Webpack runtime via NPM or Yarn.

npm install --save @injex/core @injex/webpack


Create a container

Injex.create({ ... })

Creates a new Injex Webpack container.

import { Injex } from "@injex/webpack";
// Configurations

Returns a new Injex container instance.


An Injex container instance is the same on all runtimes. Check out the Container API for more info.


You can config the Webpack container with the following configurations.


A function that returns a RequireContext generated by the require.context() function.

Since Webpack is not loading all the files in your project automatically, we need to tell Injex the pattern for our modules' file names.

  • Type: Function
  • Required: true

For example, to load all files with the .mdl.ts extension:

import { Injex } from "@injex/webpack";
resolveContext: () => {
return require.context(__dirname, true, /\.mdl\.ts$/);

The arguments passed to require.context must be literals!


Controls Injex's internal logger log level

  • Type: LogLevel
  • default: LogLevel.Error
  • Required: false


Set Injex's logger log lines prefix

  • Type: string
  • default: Injex
  • Required: false


List of plugins to include with the container instance.

  • Type: Array
  • default: []
  • Required: false

You can go to the webpack example to see the Webpack runtime in action.


When optimizing your code using tools like Terser to minify/uglify/mangle the code, it's essential to keep the function names as they are. Injex automatically registers modules by their class name. When you change the class name, Injex container won't work correctly.

You can pass the keep_fnames: true to Terser options so the function names won't be affected.

Code splitting

If you want, you can leverage Webpack's code-splitting feature when using the Injex framework. Refer to the @lazy() decorator documentation for more details.