imports loader module for webpack

imports loader for webpack

Can be used to inject variables into the scope of a module. This is especially useful if third-party modules are relying on global variables like $ or this being the window object.

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 valueEquals
angularvar angular = require("angular");
$=jqueryvar $ = require("jquery");
define=>falsevar define = false;
config=>{size:50}var config = {size:50};
this=>window(function () { ... }).call(window);

Multiple values are separated by comma ,:


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

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

Documentation: Using loaders



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.