This section covers all variables available in code compiled with webpack. Modules will have access to certain data from the compilation process through module
and other variables.
module.loaded
(NodeJS)This is false
if the module is currently executing, and true
if the sync execution has finished.
module.hot
(webpack-specific)Indicates whether or not Hot Module Replacement is enabled and provides an interface to the process. See the HMR API page for details.
module.id
(CommonJS)The ID of the current module.
module.id === require.resolve('./file.js');
module.exports
(CommonJS)Defines the value that will be returned when a consumer makes a require
call to the module (defaults to a new object).
module.exports = function doSomething() {
// Do something...
};
exports
(CommonJS)This variable is equal to the default value of module.exports
(i.e. an object). If module.exports
gets overwritten, exports
will no longer be exported.
exports.someValue = 42;
exports.anObject = {
x: 123,
};
exports.aFunction = function doSomething() {
// Do something
};
global
(NodeJS)See node.js global.
For compatibility reasons webpack polyfills the global
variable by default.
__dirname
(NodeJS)Depending on the configuration option node.__dirname
:
false
: Not definedmock
: equal to '/'
true
: node.js __dirnameIf used inside an expression that is parsed by the Parser, the configuration option is treated as true
.
import.meta.url
Returns the absolute file:
URL of the module.
src/index.js
console.log(import.meta.url); // output something like `file:///path/to/your/project/src/index.js`
import.meta.webpack
Returns the webpack version.
src/index.js
console.log(import.meta.webpack); // output `5` for webpack 5
__filename
(NodeJS)Depending on the configuration option node.__filename
:
false
: Not definedmock
: equal to '/index.js'
true
: node.js __filenameIf used inside an expression that is parsed by the Parser, the configuration option is treated as true
.
__resourceQuery
(webpack-specific)The resource query of the current module. If the following require
call was made, then the query string would be available in file.js
.
require('file.js?test');
file.js
__resourceQuery === '?test';
__webpack_public_path__
(webpack-specific)Equals the configuration option's output.publicPath
.
__webpack_require__
(webpack-specific)The raw require function. This expression isn't parsed by the Parser for dependencies.
The internal chunk loading function. Takes one argument:
chunkId
The id for the chunk to load.Example to load chunks from alternate public path when one failed:
const originalLoad = __webpack_chunk_load__;
const publicPaths = ['a', 'b', 'c'];
__webpack_chunk_load__ = async (id) => {
let error;
for (const path of publicPaths) {
__webpack_public_path__ = path;
try {
return await originalLoad(id);
} catch (e) {
error = e;
}
}
throw error;
};
import('./module-a').then((moduleA) => {
// now webpack will use the custom __webpack_chunk_load__ to load chunk
});
__webpack_modules__
(webpack-specific)Access to the internal object of all modules.
__webpack_hash__
(webpack-specific)It provides access to the hash of the compilation.
__non_webpack_require__
(webpack-specific)Generates a require
function that is not parsed by webpack. Can be used to do cool stuff with a global require function if available.
__webpack_exports_info__
(webpack-specific)In modules, __webpack_exports_info__
is available to allow exports introspection:
__webpack_exports_info__
is always true
__webpack_exports_info__.<exportName>.used
is false
when the export is known to be unused, true
otherwise
__webpack_exports_info__.<exportName>.useInfo
is
false
when the export is known to be unusedtrue
when the export is known to be usednull
when the export usage could depend on runtime conditionsundefined
when no info is available__webpack_exports_info__.<exportName>.provideInfo
is
false
when the export is known to be not providedtrue
when the export is known to be providednull
when the export provision could depend on runtime conditionsundefined
when no info is availableAccessing the info from nested exports is possible: i. e. __webpack_exports_info__.<exportName>.<exportName>.<exportName>.used
__webpack_is_included__
(webpack-specific)Test whether or not the given module is bundled by webpack.
if (__webpack_is_included__('./module-a.js')) {
// do something
}
Change base URI at runtime.
string
__webpack_base_uri__ = 'https://example.com';
DEBUG
(webpack-specific)Equals the configuration option debug
.