Module Variables#

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.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.

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 request 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',
});

The first arguments passed to import.meta.webpackContext() must be literals.

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 request.
• 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:

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 (webpack-specific)#

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

__dirname (NodeJS)#

Depending on the configuration option node.__dirname:

• false: Not defined
• mock: equal to '/'
• true: node.js __dirname

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

__resourceQuery === '?test';

__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.

__webpack_public_path__ (webpack-specific)#

Equals the configuration option's output.publicPath.

__webpack_chunkname__ (webpack-specific)#

Access to name of current chunk.

__webpack_runtime_id__ (webpack-specific)#

Access the runtime id of current entry.