TypeScript icon, indicating that this package has built-in type declarations

7.0.0-beta6 • Public • Published


MIT license GitHub package.json version npm API MD API Guides

Integration for mmir in webpack built apps.

Basic steps for integrating mmir:

  • install mmir-lib via npm
  • install mmir-webpack via npm
  • create or use existing webpack configuration where mmir-webpack configures/extends the app's base webpack-configuration for mmir, similar to
    //const webpackInstance = require('webpack');
    require('mmir-webpack')(webpackInstance, origWebpackConfig, mmirWebpackConfig)



  • Node.js
  • webpack built application with webpack version 3.x - 5.x
  • webpack plugins: (may need to be installed, see instructions below)
    "file-loader": ">=3.0.0",
    "raw-loader": ">=3.0.0",
    "virtual-module-webpack-plugin": ">=0.4.1",
    "val-loader": ">=1.1.1",
    "worker-loader": ">=2.0.0"


Install mmir-webpack via npm.

From npm registry

npm install -D mmir-webpack

Or latest development version from github

npm install -D git+

In addition, some webpack plugins are required:
if not already installed (see npm log output regarding peer/OPTIONAL dependencies during installation of mmir-webpack), they can be installed with

npm install -D file-loader raw-loader val-loader worker-loader virtual-module-webpack-plugin

For older webpack versions, see the corresponding documentation for the plugin for installing the appropriate plugin package version(s), using npm install <package>@<required version>

API Documentation

See generated API documentation (or more detailed HTML documentation) and details below.


Assuming the base webpack configuration is in /app-webpack.config.js:
then create the default-configuration file for the webpack build by creating /webpack.config.js -- this webpack build configuration should load the app's base webpack configuration and adds its mmir configuration, e.g. something similar to

const path = require('path');
const webpack = require('webpack');

const appWebpackConfig = require('./app-webpack.config');

//NOTE the following assumes that appWebpackConfig is a single webpack-configuration object

//this assumes that the mmir resources are included in the standard directory
// structure in src/app/mmir/** (see docs for more details/options)
const mmirWebpackConfig = {
  resourcesPath: path.join(__dirname, 'src/app/mmir')

require('mmir-webpack')(webpack, appWebpackConfig, mmirWebpackConfig);

module.exports = appWebpackConfig;

or an example for replacing / extending / overwriting runtime configuration settings of mmir that would usually be made in the <src-app-mmir>/config/configuration.json file:


// specify some runtime configuration settings for mmir:
const runtimeConfig = {
  language: 'de',              // this will set or overwrite language setting in configuration.json (see docs for RuntimeConfiguration)
  grammarAsyncExecMode: true   // load grammars for async-execution in web workers (see docs for RuntimeConfiguration)


//set the runtime configuration in the mmir webpack options & apply them:
const mmirWebpackConfig = {
  configuration: runtimeConfig

require('mmir-webpack')(webpack, appWebpackConfig, mmirWebpackConfig);

module.exports = appWebpackConfig;

See also file webpack.config.js for more examples.

Integrating with angular

For integrating with angular Create the mmir build configuration in a file, e.g. /mmir-webpack.config.js following instructions above, but export as a modifier function:

// ... some mmir-related configuration stored in variable mmirAppConfig, then:

const webpack = require('webpack');
//NOTE: do use function-modifiction in order to add mmir-config on top of angualar etc config
//      (otherwise, the automatic merging may interfere with mmir webpack config)
module.exports = function(webpackConfig, _options){
    require('mmir-webpack')(webpack, webpackConfig, mmirAppConfig);
  } catch(err){
    throw err;
  return webpackConfig;

Then for integration with angular:

  1. setup the project to use the custom-webpack builder for angular by installing

    # for angular v7.x
    npm install -D @angular-builders/custom-webpack@7
    # for angular v8.x
    npm install -D @angular-builders/custom-webpack@8
    # for angular v9.x
    npm install -D @angular-builders/custom-webpack@9
    # for angular v10.x
    npm install -D @angular-builders/custom-webpack@10
    # for angular v11.x
    npm install -D @angular-builders/custom-webpack@11
  2. and starting with angular v8.x, for supporting iterative dev builds, angular's custom dev-server with webpack-support

    npm install -D @angular-builders/dev-server
  3. modify the angular build configuration /angular.json:

    1. find the option for and change it to @angular-builders/custom-webpack:browser, and add an entry to its options where customWebpackConfig.path points to the file with mmir webpack configuration:
        "architect": {
         "build": {
           "builder": "@angular-builders/custom-webpack:browser",
           "options": {
             "customWebpackConfig": {
               "path": "./mmir-webpack.config.js"
    2. for supporting dev-builds, modify the entry for to use @angular-builders/custom-webpack:dev-server:
        "serve": {
           "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
             "browserTarget": "app:build"
      (in case of angular v7.x, instead you may need to configure serve analogous to build, see above)
    3. for use similar modifications as for build (see above) while setting builder to @angular-builders/custom-webpack:karma

Versioning Note

The major and minor version number of mmir-webpack matches the compatible verison of mmir-lib, i.e. mmir-webpack X.Y.i is compatible with mmir-lib X.Y.j.



Package Sidebar


npm i mmir-webpack

Weekly Downloads






Unpacked Size

529 kB

Total Files


Last publish


  • russa