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 Webpack 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 container with 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 modules' 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 literals!

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 leverage Webpack's code-splitting feature when using the Injex framework. Refer to the @lazy() decorator documentation for more details.