Inject Imports Loader

Inject dependencies into your files bundled with webpack. Useful if you're mirgrating a legacy application that doesn't use imports yet.

Install

npm i inject-imports-loader --save-dev

Usage

Inline

import 'inject-imports-loader?angular-mocks,lodash[]=reduce,lodash[]=transform~tf!./file.js';

Results in:

file.js

/*** IMPORTS FROM inject-imports-loader ***/
import "angular-mocks";
import angular from "angular";
import { reduce, transform as tf } from "lodash";

// ... (content of file.js)

Configuration

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /file\.js$/,
        use: {
          loader: 'inject-imports-loader',
          options: {
            'angular-mocks': true,
            'angular': 'angular',
            'lodash': ['reduce', 'transform~tf'],
          }
        }
      }
    ]
  }
  // ...
}

Results in:

file.js

/*** IMPORTS FROM inject-imports-loader ***/
import "angular-mocks";
import angular from "angular";
import { reduce, transform as tf } from "lodash";

// ... (content of file.js)

Similar loaders

This loader has similarities to the imports-loader, but it uses es6 import statements instead of require. If you want to inject constants or replace this with a custom value you should use the imports-loader instead (Or use both in combination).