Webpack Runtime

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

Installation

You can install the Webpack runtime via NPM or Yarn.

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

Usage

Create a container

Injex.create({ ... })

Creates a new Injex container.

import { Injex } from "@injex/webpack";
Injex.create({
// Configurations
});

Returns a new Injex container instance.

note

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

Configurations

You can config the Webpack runtime using the following configurations.

resolveContext

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 module file names.

  • Type: Function
  • Required: true

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

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

The arguments passed to require.context() must be a string literal!

logLevel

Controls Injex's internal logger log level

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

logNamespace

Set Injex's logger log lines prefix

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

plugins

List of plugins to include with the container instance.

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

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

Caveats

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 use code-splitting with Injex. Refer to the @lazy() decorator documentation for more details.

Edit this page