node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


npm deps test chat

Imports Loader

The imports loader allows you to use modules that depend on specific global variables.

This is useful for third-party modules that rely on global variables like $ or this being the window object. The imports loader can add the necessary require('whatever') calls, so those modules work with webpack.


npm install imports-loader


Given you have this file example.js


then you can inject the $ variable into the module by configuring the imports-loader like this:


This simply prepends var $ = require("jquery"); to example.js.


Query value Equals
angular var angular = require("angular");
$=jquery var $ = require("jquery");
define=>false var define = false;
config=>{size:50} var config = {size:50};
this=>window (function () { ... }).call(window);

Multiple values

Multiple values are separated by comma ,:



As always, you should rather configure this in your webpack.config.js:

// ./webpack.config.js
module.exports = {
    module: {
        rules: [
                test: require.resolve("some-module"),
                use: "imports-loader?this=>window"

Typical Use Cases

jQuery plugins


Custom Angular modules


Disable AMD

There are many modules that check for a define function before using CommonJS. Since webpack is capable of both, they default to AMD in this case, which can be a problem if the implementation is quirky.

Then you can easily disable the AMD path by writing


For further hints on compatibility issues, check out Shimming Modules of the official docs.


Juho Vepsäläinen

Joshua Wiens

Kees Kluskens

Sean Larkin