imports loader for webpack
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.
Installation
npm install imports-loader
Usage
Given you have this file example.js
$("img").doSomeAwesomeJqueryPluginStuff();
then you can inject the $
variable into the module by configuring the imports-loader like this:
require("imports-loader?$=jquery!./example.js");
This simply prepends var $ = require("jquery");
to example.js
.
Syntax
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 ,
:
require("imports-loader?$=jquery,angular,config=>{size:50}!./file.js");
webpack.config.js
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-loader?this=>window"
}
]
}
};
Typical use-cases
jQuery plugins
imports-loader?$=jquery
Custom Angular modules
imports-loader?angular
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
imports-loader?define=>false
For further hints on compatibility issues, check out Shimming Modules of the official docs.