模块#

虽然 Rspack 支持多种模块语法，但我们建议遵循单一的语法，以保持一致性并避免 bug。

ES6 (推荐)#

Rspack 原生支持 ES6 模块语法，可以使用静态的 import、export 和 import() 语法。

CommonJS#

Rspack 也支持 CommonJS 语法，可以使用 require 和 module.exports 语法。

DataURI 模块#

Rspack 支持使用 import 和 require 语法导入 DataURI 模块。

import

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

require

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

除此之外，还支持了 Base64 编码：

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

Webpack#

除了上述的模块语法之外，Rspack 还支持一些 Webpack 特有的方法。

require.context#

require.context(
  (directory: String),
  (includeSubdirs: Boolean) /*可选，默认为true */,
  (filter: RegExp) /* 可选的，默认为/^\.\/.*$/ */。
  (mode: String) /* 可选的, 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once', 默认 'sync' */
);

添加 directory、includeSubdirs，可以对引入的模块进行更精细控制。如果 mode 被设置为 lazy，模块将会被异步加载。

模块变量#

module.hot（webpack 专用）#

是否启用了热模块替换，暴露此对象并且导出一些方法，详情见 HMR API 页面。

import.meta.webpackHot（webpack 专用）#

module.hot 的别名，但是 import.meta.webpackHot 可以在严格的 ESM 中使用，而 module.hot 不能。

__dirname（NodeJS）#

配置选项 node.__dirname。

• false: 未定义
• mock: 等于 '/'
• true: node.js __dirname

如果在一个被 Parser 解析的表达式内部使用，则配置选项会被当作 true 处理。

__resourceQuery（webpack 专用）#

当前模块的资源查询（resource query）。如果进行了如下的 require 调用，那么查询字符串（query string）在 file.js 中可访问。

require('file.js?test');

__resourceQuery === '?test';

webpack_modules (webpack 专用)#

访问所有模块的内部对象。

webpack_hash (webpack 专用)#

这个变量提供对编译过程中（compilation）的 hash 信息的访问。

webpack_public_path (webpack 专用)#

等于配置选项的 output.publicPath。