CC 4.0 License

The content of this section is derived from the content of the following links and is subject to the CC BY 4.0 license.

The following contents can be assumed to be the result of modifications and deletions based on the original contents if not specifically stated.

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.

TIP

The return value of import.meta.webpackContext is the same as import.meta.webpackContext. We recommend using import.meta.webpackContext, which is more powerful.

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

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 (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:

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');
file.js
__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.