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
$("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
.
##
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 are separated by comma ,
:
require("imports-loader?$=jquery,angular,config=>{size:50}!./file.js");
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" } ] } };
imports-loader?$=jquery
imports-loader?angular
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.
Juho Vepsäläinen |
Joshua Wiens |
Kees Kluskens |
Sean Larkin |
© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/loaders/imports-loader