What is imports-loader?
The imports-loader npm package allows you to use custom imports in your modules. It is particularly useful for injecting variables or dependencies into modules that do not explicitly export them, or for polyfilling global variables.
What are imports-loader's main functionalities?
Injecting Variables
This feature allows you to inject variables into your modules. In this example, the jQuery library is injected into every JavaScript file, making the $ variable available globally.
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: [
{
loader: 'imports-loader',
options: {
additionalCode: 'var $ = require("jquery");'
}
}
]
}
]
}
};
Polyfilling Global Variables
This feature allows you to polyfill global variables that may not be available in certain environments. In this example, the process variable is polyfilled using the 'process/browser' module.
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: [
{
loader: 'imports-loader',
options: {
additionalCode: 'var process = require("process/browser");'
}
}
]
}
]
}
};
Injecting Dependencies
This feature allows you to inject dependencies into your modules. In this example, the lodash library is injected into every JavaScript file, making the _ variable available globally.
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: [
{
loader: 'imports-loader',
options: {
imports: {
moduleName: 'lodash',
name: '_'
}
}
}
]
}
]
}
};
Other packages similar to imports-loader
expose-loader
The expose-loader package allows you to expose a module globally, making it available as a global variable. This is similar to the imports-loader's ability to inject variables, but expose-loader is more focused on making specific modules globally accessible.
script-loader
The script-loader package allows you to add scripts to your bundle as a string. This can be useful for injecting scripts that are not available as modules. While imports-loader focuses on injecting variables and dependencies, script-loader is more about adding raw script content.
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.
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?$=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?$=jquery,angular,config=>{size:50}!./file.js");
webpack.config.js
As always, you should rather configure this in your webpack.config.js
:
module.exports = {
...
module: {
loaders: [
{
test: require.resolve("some-module")
loader: "imports?this=>window"
}
]
};
Documentation: Using loaders
Typical use-cases
jQuery plugins
imports?$=jquery
Custom Angular modules
imports?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?define=>false
For further hints on compatibility issues, check out Shimming Modules of the official docs.
License
MIT (http://www.opensource.org/licenses/mit-license.php)