模块#

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

ES6 (推荐)#

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

Magic Comments#

通过在 import 中添加注释，我们可以进行诸如给 chunk 命名或选择不同模式的操作。

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

webpackChunkName: 新 chunk 的名称。

webpackPrefetch: 告诉浏览器将来可能需要该资源来进行某些导航跳转（0.4.5 及以上版本支持）。

webpackPreload: 告诉浏览器在当前导航期间可能需要该资源（0.4.5 及以上版本支持）。

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。

__webpack_chunkname__ (webpack-specific)#

访问当前 chunk 的名称。

__webpack_runtime_id__ (webpack-specific)#

访问当前入口的 runtime id。