imports-loader
Advanced tools
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.
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: '_'
}
}
}
]
}
]
}
};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.
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.
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.
For further hints on compatibility issues, check out Shimming of the official docs.
Warning
By default loader generate ES module named syntax.
Warning
Be careful, existing imports (
import/require) in the original code and importing new values can cause failure.
To begin, you'll need to install imports-loader:
npm install imports-loader --save-dev
or
yarn add -D imports-loader
or
pnpm add -D imports-loader
Given you have this file:
example.js
$("img").doSomeAwesomeJqueryPluginStuff();
Then you can inject the jquery value into the module by configuring the imports-loader using two approaches.
The | or %20 (space) allow to separate the syntax, moduleName, name and alias of import.
The documentation and syntax examples can be read here.
Warning
%20is space in a query string, because you can't use spaces in URLs
// Alternative syntax:
//
// import myLib from 'imports-loader?imports=default%20jquery%20$!./example.js';
//
// `%20` is space in a query string, equivalently `default jquery $`
import myLib from "imports-loader?imports=default|jquery|$!./example.js";
// Adds the following code to the beginning of example.js:
//
// import $ from "jquery";
//
// ...
// Code
// ...
import myLib from "imports-loader?imports=default|jquery|$,angular!./example.js";
// `|` is separator in a query string, equivalently `default|jquery|$` and `angular`
// Adds the following code to the beginning of example.js:
//
// import $ from "jquery";
// import angular from "angular";
//
// ...
// Code
// ...
import myLib from "imports-loader?imports=named|library|myMethod,angular!./example.js";
// `|` is separator in a query string, equivalently `named|library|myMethod` and `angular`
// Adds the following code to the beginning of example.js:
//
// import { myMethod } from "library";
// import angular from "angular";
//
// ...
// Code
// ...
const myLib = require(
`imports-loader?type=commonjs&imports=single|jquery|$,angular!./example.js`,
);
// `|` is separator in a query string, equivalently `single|jquery|$` and `angular`
// Adds the following code to the beginning of example.js:
//
// var $ = require("jquery");
// var angular = require("angular");
//
// ...
// Code
// ...
const myLib = require(
`imports-loader?type=commonjs&imports=single|myLib|myMethod&wrapper=window&!./example.js`,
);
// `|` is separator in a query string, equivalently `single|myLib|myMethod` and `angular`
// Adds the following code to the example.js:
//
// const myMethod = require('myLib');
//
// (function () {
// ...
// Code
// ...
// }.call(window));
import myLib from "imports-loader?additionalCode=var%20myVariable%20=%20false;!./example.js";
// Adds the following code to the beginning of example.js:
//
// var myVariable = false;
//
// ...
// Code
// ...
webpack.config.js
module.exports = {
module: {
rules: [
{
// You can use `regexp`
// test: /example\.js$/
test: require.resolve("example.js"),
use: [
{
loader: "imports-loader",
options: {
imports: [
"default jquery $",
"default lib_2 lib_2_default",
"named lib_3 lib2_method_1",
"named lib_3 lib2_method_2 lib_2_method_2_short",
"namespace lib_4 my_namespace",
"side-effects lib_5",
{
syntax: "default",
moduleName: "angular",
name: "angular",
},
],
},
},
],
},
],
},
};
Generate output:
import $ from "jquery";
import lib_2_default from "lib_2";
import { lib2_method_1, lib2_method_2 as lib_2_method_2_short } from "lib_3";
import * as my_namespace from "lib_4";
import "lib_5";
import angular from "angular";
And run webpack via your preferred method.
typeType:
type type = string;
Default: module
Format of generated exports.
Possible values - commonjs (CommonJS module syntax) and module (ES module syntax).
commonjswebpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("example.js"),
loader: "imports-loader",
options: {
syntax: "default",
type: "commonjs",
imports: "Foo",
},
},
],
},
};
Generate output:
var Foo = require("Foo");
// ...
// Code
// ...
modulewebpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("example.js"),
loader: "imports-loader",
options: {
type: "module",
imports: "Foo",
},
},
],
},
};
Generate output:
import Foo from "Foo";
// ...
// Code
// ...
importsType:
type imports =
| string
| {
syntax:
| "default"
| "named"
| "namespace"
| "side-effects"
| "single"
| "multiple"
| "pure";
moduleName: string;
name: string;
alias: string;
}
| Array<
| string
| {
syntax:
| "default"
| "named"
| "namespace"
| "side-effects"
| "single"
| "multiple"
| "pure";
moduleName: string;
name: string;
alias: string;
}
>;
Default: undefined
List of imports.
stringAllows to use a string to describe an export.
SyntaxThe | or %20 (space) allow to separate the syntax, moduleName, name and alias of import.
String syntax - [[syntax] [moduleName] [name] [alias]] or [[syntax]|[moduleName]|[name]|[alias]], where:
[syntax] (may be omitted):
type is module- can be default, named, namespace or side-effects, the default value is default.type is commonjs- can be single, multiple or pure, the default value is single.[moduleName] - name of an imported module (required)
[name] - name of an imported value (required)
[alias] - alias of an imported value (may be omitted)
Examples:
If type module:
[Foo] - generates import Foo from "Foo";.[default Foo] - generates import Foo from "Foo";.[default ./my-lib Foo] - generates import Foo from "./my-lib";.[named Foo FooA] - generates import { FooA } from "Foo";.[named Foo FooA Bar] - generates import { FooA as Bar } from "Foo";.[namespace Foo FooA] - generates import * as FooA from "Foo";.[side-effects Foo] - generates import "Foo";.If type commonjs:
[Foo] - generates const Foo = require("Foo");.[single Foo] - generates const Foo = require("Foo");.[single ./my-lib Foo] - generates const Foo = require("./my-lib");.[multiple Foo FooA Bar] - generates const { FooA: Bar } = require("Foo");.[pure Foo] - generates require("Foo");.Warning
You need to set
type: "commonjs"to usesingle,multipleandpuresyntaxes.
Warning
Aliases can't be used together with
default,namespace,side-effects,singleandpuresyntaxes.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("./path/to/example.js"),
loader: "imports-loader",
options: {
imports: "default lib myName",
},
},
],
},
};
Generate output:
import myName from "lib";
// ...
// Code
// ...
webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("./path/to/example.js"),
loader: "imports-loader",
options: {
type: "commonjs",
imports: "single lib myName",
},
},
],
},
};
Generate output:
var myName = require("lib");
// ...
// Code
// ...
objectAllows to use an object to describe an import.
Properties:
syntax:
type is module- can be default, named, namespace or side-effectstype is commonjs- can be single, multiple or puremoduleName - name of an imported module (required)
name - name of an imported value (required)
alias - alias of an imported value (may be omitted)
Warning
Alias can't be used together with
default,namespace,side-effects,singleandpuresyntaxes.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("example.js"),
use: [
{
loader: "imports-loader",
options: {
imports: {
syntax: "named",
moduleName: "lib_2",
name: "lib2_method_2",
alias: "lib_2_method_2_alias",
},
},
},
],
},
],
},
};
Generate output:
import { lib2_method_2 as lib_2_method_2_alias } from "lib_2";
// ...
// Code
// ...
arrayAllow to specify multiple imports.
Each item can be a string or an object.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("example.js"),
use: [
{
loader: "imports-loader",
options: {
imports: [
{
moduleName: "angular",
},
{
syntax: "default",
moduleName: "jquery",
name: "$",
},
"default lib_2 lib_2_default",
"named lib_2 lib2_method_1",
"named lib_2 lib2_method_2 lib_2_method_2_alias",
"namespace lib_3 lib_3_all",
"side-effects lib_4",
],
},
},
],
},
],
},
};
Generate output:
import angular from "angular";
import $ from "jquery";
import lib_2_default from "lib_2";
import { lib2_method_1, lib2_method_2 as lib_2_method_2_alias } from "lib_2";
import * as lib_3_all from "lib_3";
import "lib_4";
// ...
// Code
// ...
wrapperType:
type wrapper =
| boolean
| string
| {
thisArg: string;
args: Record<string, string> | Array<string>;
};
Default: undefined
Closes the module code in a function with a given thisArg and args ((function () { ... }).call();).
Warning
Do not use this option if source code contains ES module import(s)
booleanwebpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("example.js"),
use: [
{
loader: "imports-loader",
options: {
imports: {
moduleName: "jquery",
name: "$",
},
wrapper: true,
},
},
],
},
],
},
};
Generate output:
import $ from "jquery";
(function () {
// ...
// Code
// ...
}).call();
stringwebpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("example.js"),
use: [
{
loader: "imports-loader",
options: {
imports: {
moduleName: "jquery",
name: "$",
},
wrapper: "window",
},
},
],
},
],
},
};
Generate output:
import $ from "jquery";
(function () {
// ...
// Code
// ...
}).call(window);
objectwebpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("example.js"),
use: [
{
loader: "imports-loader",
options: {
imports: {
moduleName: "jquery",
name: "$",
},
wrapper: {
thisArg: "window",
args: ["myVariable", "myOtherVariable"],
},
},
},
],
},
],
},
};
Generate output:
import $ from "jquery";
(function (myVariable, myOtherVariable) {
// ...
// Code
// ...
}).call(window, myVariable, myOtherVariable);
object with different parameter nameswebpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("example.js"),
use: [
{
loader: "imports-loader",
options: {
imports: {
moduleName: "jquery",
name: "$",
},
wrapper: {
thisArg: "window",
args: {
myVariable: "var1",
myOtherVariable: "var2",
},
},
},
},
],
},
],
},
};
Generate output:
import $ from "jquery";
(function (var1, var2) {
// ...
// Code
// ...
}).call(window, myVariable, myOtherVariable);
additionalCodeType:
type additionalCode = string;
Default: undefined
Adds custom code as a preamble before the module's code.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("example.js"),
use: [
{
loader: "imports-loader",
options: {
imports: {
moduleName: "jquery",
name: "$",
},
additionalCode: "var myVariable = false;",
},
},
],
},
],
},
};
Generate output:
import $ from "jquery";
var myVariable = false;
// ...
// Code
// ...
webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("example.js"),
use: [
{
loader: "imports-loader",
options: {
imports: {
moduleName: "jquery",
name: "$",
},
additionalCode:
"var define = false; /* Disable AMD for misbehaving libraries */",
},
},
],
},
],
},
};
Generate output:
import $ from "jquery";
var define = false; /* Disable AMD for misbehaving libraries */
// ...
// Code
// ...
Please take a moment to read our contributing guidelines if you haven't yet done so.
FAQs
imports loader module for webpack
We found that imports-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.