imports-loader allows you to use modules that depend on specific global variables. This is useful for third-party modules that may rely on global variables. imports-loader can add the necessary require calls, making them work with Webpack. Let's set it up by going through the following steps:
- To install the loader in the command line, use the following statement:
npm install imports-loader
Assuming that you have the example.js file, this loader allows you to append an imported script to image tags using jQuery, as follows:
$("img").doSomeAwesomeJqueryPluginStuff();
- The $ variable can then be injected into the module by configuring imports-loader, as follows:
require("imports-loader?$=jquery!./example.js");
This will simply prepend var $ = require("jquery"); to example.js. This can be useful, for instance, if you are optimizing your code to run libraries locally.
Using polymer-loader similarly optimizes your code or automates your processes to allow transitions. This is the next topic of our discussion.