Modules#

While Rspack supports multiple module syntaxes, we recommend following a single syntax for consistency and to avoid odd behaviors/bugs.

ES6 (Recommended)#

Rspack support ES6 module syntax natively, you can use static import, export and import() syntax.

Magic Comments#

By adding comments to the import, we can do things such as name our chunk or select different modes.

import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  'module'
);

webpackChunkName: A name for the new chunk.

webpackPrefetch: Tells the browser that the resource is probably needed for some navigation in the future (Available since 0.4.5).

webpackPreload: Tells the browser that the resource might be needed during the current navigation (Available since 0.4.5).

CommonJS#

Rspack is also support CommonJS syntax natively, you can use require and module.exports syntax.

DataURI Module#

Rspack supports importing DataURI modules using the import and require syntax.

import

import DataURI from 'data:text/javascript,export default 42';

require

require('data:text/javascript,module.exports = 42');

In addition, Base64 encoded requests are also supported:

const {
  number,
  fn,
} = require('data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgZnVuY3Rpb24gZm4oKSB7CiAgcmV0dXJuICJIZWxsbyB3b3JsZCI7Cn0=');

Webpack#

Aside from the module syntaxes described above, Rspack also support some webpack-specific methods.

require.context#

require.context(
  (directory: String),
  (includeSubdirs: Boolean) /* optional, default true */,
  (filter: RegExp) /* optional, default /^\.\/.*$/, any file */,
  (mode: String) /* optional, 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once', default 'sync' */
);

Specify a whole group of dependencies using a path to the directory, an option to includeSubdirs, a filter for more fine grained control of the modules included, and a mode to define the way how loading will work. If mode is set to 'lazy', the underlying modules will be loaded asynchronously.

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