#Module variables

This section covers all variables available in code compiled with Rspack. Modules will be able to access specific data from the compilation process through module and other variables.

#CommonJS

#module.loaded

false means that the module is being executed, true the synchronous execution has been completed.

#module.id

Current module ID.

module.id === require.resolve('./src/main.js'); // true

#module.hot

Indicates whether or not hot module replacement is enabled and provides an interface to the process. See the HMR API page for details.

#global

See node.js global for details.

Rspack will replace the global with a proxy object and handle compatibility issues in it.

global['property']

__webpack_require__.g['property'];

// webpack/runtime/global
__webpack_require__.g = (function () {
  // compatibility code
})();

#__filename

Depends on the configuration node.__filename.

• false: undefined
• mock: equal to '/index.js'
• true: NodeJs __filename

If used inside an expression that is parsed by the Parser, the configuration option is treated as true.

__filename

'src/main.js';

#__dirname

Depends on the configuration node.__dirname.

• false: undefined
• mock: equal to '/index.js'
• true: NodeJs __dirname

If used inside an expression that is parsed by the Parser, the configuration option is treated as true.

__dirname

'src';

#import.meta (ESM)

The import.meta exposes context-specific metadata to a JavaScript module, such as the URL of the module. It is only available in ESM.

Please note that Rspack does not support direct access to import.meta. Instead, you should access its properties or use destructuring assignment. E.g.,

import.meta
typeof import.meta

{
} // Warning: Direct access to import.meta is not supported (only property access or destructuring is supported)
('object');

#import.meta.url

Returns the absolute file: URL of the module.

import.meta.url
typeof import.meta.url

'file://project_root/src/main.js';
'string';

#import.meta.webpackContext

import.meta.webpackContext is a function specific to webpack that allows you to dynamically import a set of modules.

You can use import.meta.webpackContext in your code, and Rspack will parse and reference the matching modules during the build process.

• Type:

function webpackContext(
  /**
   * A directory to search.
   */
  request: string,
  options?: {
    /**
     * Whether subdirectories should be searched.
     * @default true
     */
    recursive?: boolean;
    /**
     * A regular expression to match files.
     * @default /^\.\/.*$/ (any file)
     */
    regExp?: RegExp;
    /**
     * Module loading mode.
     * @default 'sync'
     */
    mode?: 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once';
    include?: RegExp;
    exclude?: RegExp;
    preload?: boolean | number;
    prefetch?: boolean | number;
    chunkName?: string;
    exports?: string | string[][];
  },
): Context;

• Example:

// Create a context, with files from the test directory that
// can be required with a module specifier ending with `.test.js`.
const context = import.meta.webpackContext('./test', {
  recursive: false,
  regExp: /\.test\.js$/,
});

// Create a context with all files in the parent folder and
// descending folders ending with `.stories.js`.
const context = import.meta.webpackContext('../', {
  recursive: true,
  regExp: /\.stories\.js$/,
});

// If mode is set to 'lazy', the underlying modules will be loaded asynchronously
const context = import.meta.webpackContext('./locales', {
  recursive: true,
  regExp: /\.json$/,
  mode: 'lazy',
});

#context API

The context returned by import.meta.webpackContext() is a function that takes a request argument (module path).

This function has three properties: resolve, keys, and id.

• resolve is a function and returns the module id of the parsed module specifier.
• keys is a function that returns an array of all possible requests that the context module can handle.
• id is the module id of the context module. This may be useful for module.hot.accept.

This can be useful if you want to require all files in a directory or matching a pattern.

Consider a scenario where you have a folder structure like this:

src
├── components
│   ├── Button.js
│   ├── Header.js
│   └── Footer.js

You can use import.meta.webpackContext() to dynamically import all component files in the folder:

const componentsContext = import.meta.webpackContext('./components', {
  recursive: false,
  regExp: /\.js$/,
});

componentsContext.keys().forEach(fileName => {
  const componentModule = componentsContext(fileName);

  // Here you can use your module, for example console.log
  console.log(componentModule);
});

import.meta.webpackContext() streamlines the process of module importation especially when you have a lot of files to manage. When using it, please avoid matching unnecessary files, as this might lead to significantly increased build time and output size.

#import.meta.webpackHot

An alias for module.hot, however import.meta.webpackHot can be used in strict ESM while module.hot can't.

#Runtime

#__webpack_hash__

It provides access to the hash of the compilation.

__webpack_hash__

__webpack_require__.h();

// webpack/runtime/get_full_hash
__webpack_require__.h = function () {
  return '9210c6f859a51c6f9a62';
};

#__webpack_runtime_id__

Access the runtime id of current entry.

__webpack_runtime_id__

__webpack_require__.j;

// webpack/runtime/runtime_id
__webpack_require__.j = '909';

#__webpack_public_path__

Equals the configuration option's output.publicPath.

__webpack_public_path__

__webpack_require__.p;

// output.publicPath !== "auto"
__webpack_require__.p = 'output.publicPath';
// output.publicPath === "auto"
__webpack_require__.p = 'calculated from document/location';

See Dynamically set publicPath for more information about the usage of __webpack_public_path__.

#__webpack_base_uri__

Get or change base URI at runtime.

__webpack_base_uri__

__webpack_require__.b;

// chunk loading
__webpack_require__.b = document.baseURI || self.location.href;

#__webpack_nonce__

Rspack is capable of adding a nonce to all scripts that it loads. To activate this feature, set a __webpack_nonce__ variable and include it in your entry script.

__webpack_nonce__ = 'your_nonce_code';

__webpack_require__.nc = '2312312';

// webpack/runtime/load_script
if (__webpack_require__.nc) {
  script.setAttribute('nonce', __webpack_require__.nc);
}

#Modules

#__webpack_modules__

Access to the internal object of all modules.

__webpack_modules__

var __webpack_modules__ = {
  'main.js': function () {
    __webpack_require__.m;
  },
};
__webpack_require__.m = __webpack_modules__;

#__webpack_module__

It provides access to the the current module. module is not available in strict ESM.

__webpack_module__

"main.js": function(renamed_module) {
  renamed_module
}

#__webpack_module__.id

It provides access to the ID of current module (module.id). module is not available in strict ESM.

__webpack_module__.id

"main.js": function(renamed_module) {
  renamed_module.id
}

#__webpack_require__

The raw require function. This expression isn't parsed by the Parser for dependencies.

__webpack_require__('./dep.js')

"main.js": function(_, __, renamed_require) {
  renamed_require('./dep.js')
}

#__non_webpack_require__

Generates a require function that is not parsed by webpack. Can be used to do cool stuff with a global require function if available.

__non_webpack_require__('outer.js')

"main.js": function(_, __, __webpack_require__) {
  require('outer.js')
}

#__webpack_is_included__

Test whether or not the given module is bundled by webpack.

if (__webpack_is_included__('./dep.js')) {
  // do something
}

if (true) {
  // do something
}

#__resourceQuery

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');

__resourceQuery

'?test';

#__webpack_exports_info__

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 unused
  • true when the export is known to be used
  • null when the export usage could depend on runtime conditions
  • undefined when no info is available
• __webpack_exports_info__.<exportName>.provideInfo is
  • false when the export is known to be not provided
  • true when the export is known to be provided
  • null when the export provision could depend on runtime conditions
  • undefined when no info is available
• Accessing the info from nested exports is possible: i. e. __webpack_exports_info__.<exportName>.<exportProperty1>.<exportProperty2>.used
• Check whether exports can be mangled with __webpack_exports_info__.<exportName>.canMangle

if (__webpack_exports_info__.someUsedExport.used) { }
if (__webpack_exports_info__.someUnusedExport.used) { }

if (true) {
}
if (false) {
}

#Chunks

#__webpack_chunkname__

Get current chunk name.

__webpack_chunkname__

__webpack_require__.cn;

// webpack/runtime/chunk_name
__webpack_require__.cn = 'main';

#__webpack_chunk_load__

The internal chunk loading function. Takes one argument:

• chunkId: the id for the chunk to load.

__webpack_chunk_load__

__webpack_require__.e;

// webpack/runtime/ensure_chunk
__webpack_require__.e = function (chunkId) {
  // return chunk loading promise
};

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_get_script_filename__

It provides filename of the chunk by its id.

__webpack_get_script_filename__

__webpack_require__.u;

// webpack/runtime/get_chunk_filename
__webpack_require__.u = function (chunkId) {
  // ...
};

It is assignable, which allows changing the filename used by the runtime. For example, it can be used to determine the final path when loading chunks.

const oldFn = __webpack_get_script_filename__;

__webpack_get_script_filename__ = chunkId => {
  const filename = oldFn(chunkId);
  return filename + '.changed';
};

#Module Federation

#__webpack_share_scopes__

This object is used as a shared scope in the remote container and is filled with the provided modules from a host

#__webpack_init_sharing__

This method is used to initialize modules of a shared scope in the host container.

#System.js

#__system_context__

Context from System.js when output.libraryTarget="system"

#Rspack

#__rspack_version__

Current Rspack version, default to version in @rspack/core/package.json, can be modified through experiments.rspackFuture.bundlerInfo.version.

__rspack_version__

__webpack_require__.rv;

// webpack/runtime/rspack_version
__webpack_require__.rv = '0.7.4';

#__rspack_unique_id__

The ID of the current bundler, the value is bundler={bundler}@{version}:

• bundler: Default to "rspack" and can be modified through experiments.rspackFuture.bundlerInfo.bundler.
• version: Default to version in @rspack/core/package.json and can be modified through experiments.rspackFuture.bundlerInfo.version.

__rspack_unique_id__

__webpack_require__.ruid;

// webpack/runtime/rspack_unique_id
__webpack_require__.ruid = 'bundler=rspack@0.7.4';