https://rspack.rs/static/js/async/route-72dfc5f60be2.59d6e3bdcd.js

1"use strict";(self.rspackChunkrspack_website=self.rspackChunkrspack_website||[]).push([["d0"],{uL(s,e,n){n.r(e);var r=n("i"),i=n("fj"),l=n("V"),o=n("sX"),c=n("yW");function a(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"模块方法",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#模块方法",children:"#"}),"模块方法"]}),"\n",(0,r.jsxs)(e.p,{children:["当使用 Rspack 打包应用程序时，你可以选择多种模块语法风格，包括 ",(0,r.jsx)(e.a,{href:"https://nodejs.org/api/esm.html#modules-ecmascript-modules",rel:"noopener noreferrer",target:"_blank",children:"ES modules"})," 和 ",(0,r.jsx)(e.a,{href:"https://nodejs.org/api/modules.html",rel:"noopener noreferrer",target:"_blank",children:"CommonJS"}),"。"]}),"\n",(0,r.jsx)(e.p,{children:"尽管 Rspack 支持多种模块语法，但我们还是建议尽量使用一致的语法，以此避免一些奇怪的行为和 bug。"}),"\n",(0,r.jsxs)(e.p,{children:["事实上，当距离最近的 ",(0,r.jsx)(e.code,{children:"package.json"})," 文件中 ",(0,r.jsx)(e.a,{href:"https://nodejs.org/api/packages.html#type",rel:"noopener noreferrer",target:"_blank",children:'"type"'})," 字段值为 ",(0,r.jsx)(e.code,{children:'"module"'})," 或 ",(0,r.jsx)(e.code,{children:'"commonjs"'})," 时，Rspack 会对 ",(0,r.jsx)(e.code,{children:".mjs"})," 文件、",(0,r.jsx)(e.code,{children:".cjs"})," 文件或",(0,r.jsx)(e.code,{children:".js"})," 文件进行对应的处理："]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:["文件后缀为 ",(0,r.jsx)(e.code,{children:".mjs"}),"，或者 ",(0,r.jsx)(e.code,{children:"package.json"})," 中 ",(0,r.jsx)(e.code,{children:'"type": "module"'})," 且后缀为 ",(0,r.jsx)(e.code,{children:".js"})," 时：","\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:["不允许使用 CommonJS，如 ",(0,r.jsx)(e.code,{children:"require"}),"，",(0,r.jsx)(e.code,{children:"module.exports"})," 或 ",(0,r.jsx)(e.code,{children:"exports"})]}),"\n",(0,r.jsxs)(e.li,{children:["引入文件时需指定扩展名，例如，应使用 ",(0,r.jsx)(e.code,{children:"import './src/App.mjs'"}),"，而非 ",(0,r.jsx)(e.code,{children:"import './src/App'"})]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(e.li,{children:["文件后缀为 ",(0,r.jsx)(e.code,{children:".cjs"}),"，或者 ",(0,r.jsx)(e.code,{children:"package.json"})," 中 ",(0,r.jsx)(e.code,{children:'"type": "commonjs"'})," 且后缀为 ",(0,r.jsx)(e.code,{children:".js"})," 时：","\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:["不允许使用 ESM，如 ",(0,r.jsx)(e.code,{children:"import"})," 和 ",(0,r.jsx)(e.code,{children:"export"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(e.h2,{id:"es-modules-推荐",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#es-modules-推荐",children:"#"}),"ES modules (推荐)"]}),"\n",(0,r.jsxs)(e.p,{children:["Rspack 原生支持 ES modules 语法，可以使用静态的 ",(0,r.jsx)(e.code,{children:"import"}),"、",(0,r.jsx)(e.code,{children:"export"})," 和 ",(0,r.jsx)(e.code,{children:"import()"})," 语法。"]}),"\n",(0,r.jsx)(l.Pq,{type:"warning",title:"Warning",children:(0,r.jsx)(e.p,{children:"\n如果使用其他的 ES6+ 特性，你仍然需要引入 SWC 或 Babel 进行转换。"})}),"\n",(0,r.jsxs)(e.h3,{id:"import",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#import",children:"#"}),"import"]}),"\n",(0,r.jsxs)(e.p,{children:["静态 ",(0,r.jsx)(e.code,{children:"import"})," 另一个模块的 ",(0,r.jsx)(e.code,{children:"export"}),"。"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" MyModule "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './my-module.js'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { NamedExport } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './other-module.js'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["你还可以 ",(0,r.jsx)(e.code,{children:"import"})," Data URI，这允许你直接在导入语句中嵌入 Base64 编码的 JavaScript 代码："]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// 等同于 import 一个包含 `console.log('hello')` 的模块"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'data:text/javascript;charset=utf-8;base64,Y29uc29sZS5sb2coJ2hlbGxvJyk='"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// 等同于 import 一个包含 `export const number = 42;` 的模块"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { number } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOw=='"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"export",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#export",children:"#"}),"export"]}

1),"\n",(0,r.jsx)(e.p,{children:"将任何内容作为默认导出或具名导出。"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// 具名导出"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" var"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Count "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 5"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Multiply"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(a"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" b) {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" a "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"*"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" b;"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// 默认导出"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  // Some data..."})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"dynamic-import",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#dynamic-import",children:"#"}),"Dynamic import()"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(path"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["动态加载模块，参考 ",(0,r.jsx)(e.a,{href:"/zh/guide/optimization/code-splitting.html#%E5%8A%A8%E6%80%81%E5%AF%BC%E5%85%A5dynamic-import",children:"Dynamic import"})," 了解更多。"]}),"\n",(0,r.jsxs)(e.p,{children:["对 ",(0,r.jsx)(e.code,{children:"import()"})," 的调用被视为分割点，这意味着请求的模块及其子模块被拆分成单独的 chunk。"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"module"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".hot) {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'lodash'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".then"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((_) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"    // 使用 lodash 做些事情..."})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsx)(l.Pq,{type:"warning",title:"Warning",children:(0,r.jsxs)(e.p,{children:["\n此功能内部依赖于 ",(0,r.jsx)(e.code,{children:"Promise"}),"。如果你在旧版浏览器中使用 ",(0,r.jsx)(e.code,{children:"import()"}),"，请记得使用类似于 ",(0,r.jsx)(e.a,{href:"https://github.com/zloirock/core-js",rel:"noopener noreferrer",target:"_blank",children:"core-js"}),"， ",(0,r.jsx)(e.a,{href:"https://github.com/stefanpenner/es6-promise",rel:"noopener noreferrer",target:"_blank",children:"es6-promise"})," 或 ",(0,r.jsx)(e.a,{href:"https://github.com/taylorhakes/promise-polyfill",rel:"noopener noreferrer",target:"_blank",children:"promise-polyfill"})," 的 polyfill 来模拟 ",(0,r.jsx)(e.code,{children:"Promise"}),"。"]})}),"\n",(0,r.jsxs)(e.h3,{id:"import-中的动态表达式",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#import-中的动态表达式",children:"#"}),"import() 中的动态表达式"]}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"import()"})," 无法使用完全动态的导入语句，例如 ",(0,r.jsx)(e.code,{children:"import(foo)"}),"。因为 ",(0,r.jsx)(e.code,{children:"foo"})," 可能是系统或项目中任何文件的任何路径。"]}

1),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"import()"})," 必须至少包含一些关于模块所在位置的信息。可以将打包限制在特定目录或一组文件中，这样当你使用动态表达式时，在 ",(0,r.jsx)(e.code,{children:"import()"})," 调用中可能被请求的每个模块都会被包括进来。"]}),"\n",(0,r.jsxs)(e.p,{children:["例如，",(0,r.jsx)(e.code,{children:"import(./locale/${language}.json)"})," 会将 ",(0,r.jsx)(e.code,{children:"./locale"})," 目录中的每个 ",(0,r.jsx)(e.code,{children:".json"})," 文件都被打包进新的代码块。在运行时，一旦变量 ",(0,r.jsx)(e.code,{children:"language"})," 被计算出来，任何像 ",(0,r.jsx)(e.code,{children:"english.json"})," 或 ",(0,r.jsx)(e.code,{children:"german.json"})," 这样的文件都将可供使用。"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// 想象一下，如果我们有一种方法可以从 Cookie 或其他存储中获取语言"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" language"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" detectVisitorLanguage"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`./locale/"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"language"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:".json`"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".then"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((module) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  // 做一些翻译相关的事情"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"magic-comments",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#magic-comments",children:"#"}),"import() 中的魔法注释"]}),"\n",(0,r.jsx)(c.a,{specific:["Rspack","Webpack"]}),"\n",(0,r.jsx)(e.p,{children:"通过向 import 语句添加注释，可以指定 chunk 名称、加载模式等行为。"}),"\n",(0,r.jsxs)(l.Pq,{type:"tip",title:"Tip",children:[(0,r.jsxs)(e.p,{children:["\n从 Rspack 2.1.0 开始，推荐使用下方的 ",(0,r.jsx)(e.code,{children:"rspack"})," 前缀魔法注释。对应的 ",(0,r.jsx)(e.code,{children:"webpack"})," 前缀注释仍会被兼容支持，例如 ",(0,r.jsx)(e.code,{children:"webpackIgnore"})," 等价于 ",(0,r.jsx)(e.code,{children:"rspackIgnore"}),"。"]}),(0,r.jsxs)(e.p,{children:["下方示例统一使用 ",(0,r.jsx)(e.code,{children:"rspack"})," 前缀；如需兼容 webpack，可以将其替换为对应的 ",(0,r.jsx)(e.code,{children:"webpack"})," 前缀。"]})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// 单个模块"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:'  /* rspackChunkName: "my-chunk-name" */'})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:'  /* rspackMode: "lazy" */'})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:'  /* rspackFetchPriority: "high" */'})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"  'module'"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// 多个可能模块"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  /* rspackInclude: /\\.json$/ */"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  /* rspackExclude: /\\.noimport\\.json$/ */"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:'  /* rspackChunkName: "my-chunk-name" */'})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:'  /* rspackMode: "lazy" */'})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  /* rspackPrefetch: true */"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  /* rspackPreload: true */"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"  `./locale/"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"language"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"rspackignore",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rspackignore",children:"#"}),"rspackIgnore"]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"类型："})," ",(0,r.jsx)(e.code,{children:"boolean"})]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"webpack 兼容名称："})," ",(0,r.jsx)(e.code,{children:"webpackIgnore"})]}),"\n"]}),"\n",(0,r.jsxs)(e.p,{children:["设置为 ",(0,r.jsx)(e.code,{children:"true"})," 时，Rspack 将跳过对该动态导入的静态分析和打包处理。具体表现为："]}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsx)(e.li,{children:"构建时不会分析该模块的依赖关系"}),"\n",(0,r.jsx)(e.li,{children:"该模块不会被打包为独立的 chunk 文件"}),"\n",(0,r.jsxs)(e.li,{children:["导入操作将在运行时由浏览器原生 ",(0,r.jsx)(e.code,{children:"import()"})," 执行"]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"这在需要从外部 CDN 动态加载 ESM 格式的第三方库时特别有用，例如："}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'https://esm.sh/react'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" /* rspackIgnore: true */"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".then"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((React) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"  console"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".log"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".version); "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// 19.0.0"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"rspackIgnore"})," 同样适用于 ",(0,r.jsx)(e.code,{children:"new URL()"})," 语法。默认情况下，Rspack 会解析 ",(0,r.jsx)(e.code,{children:"new URL()"})," 中的模块标识符，并将其引用的模块打包到构建产物中。当你需要 Rspack 跳过某个 ",(0,r.jsx)(e.code,{children:"new URL()"})," 的处理时，可以添加 ",(0,r.jsx)(e.code,{children:"rspackIgnore: true"})," 注释："]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"}

1,children:"// Rspack 会处理这个 URL，将 './index.css' 打包到构建产物中"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" url1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" new"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" URL"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'./index.css'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"meta"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".url);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// Rspack 会忽略这个 URL，保持原始的模块标识符"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" url2"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" new"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" URL"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"/* rspackIgnore: true */"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './index.css'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"meta"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".url);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// 同样支持 `webpackIgnore`"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" url3"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" new"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" URL"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"/* webpackIgnore: true */"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './index.css'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"meta"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".url);"})]})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"rspackmode",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rspackmode",children:"#"}),"rspackMode"]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"类型："})," ",(0,r.jsx)(e.code,{children:'"eager" | "lazy" | "weak" | "lazy-once"'})]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"webpack 兼容名称："})," ",(0,r.jsx)(e.code,{children:"webpackMode"})]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"默认值："})," ",(0,r.jsx)(e.code,{children:"'lazy'"})]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"可以指定以不同的模式解析动态导入。支持以下选项："}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"'lazy'"}),"（默认值）：为每个可能导入的模块生成一个可延迟加载的 chunk。"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"'lazy-once'"}),"：将动态导入上下文中的所有可能模块生成到同一个异步 chunk 中。第一次调用 ",(0,r.jsx)(e.code,{children:"import()"})," 时加载该 chunk，后续调用会复用它。此模式适用于 ",(0,r.jsx)(e.code,{children:"import('./locales/' + language + '.json')"})," 这类可能匹配多个模块的动态表达式。"]}

1),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"'eager'"}),"：不生成额外的 chunk，而是将所有可能的模块放入当前 chunk，因此不会产生额外的网络请求。",(0,r.jsx)(e.code,{children:"import()"})," 仍然返回 Promise，且模块要等到调用 ",(0,r.jsx)(e.code,{children:"import()"})," 时才会执行。"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"'weak'"}),"：仅在模块已通过其他方式加载时才解析成功，例如模块已包含在另一个加载完成的 chunk 中。此模式不会发起网络请求；如果模块不可用，Promise 会被拒绝。它主要用于由服务端确保所需 chunk 已包含在初始响应中的 SSR 场景。"]}),"\n"]}),"\n",(0,r.jsxs)(e.p,{children:["例如，使用 ",(0,r.jsx)(e.code,{children:"lazy-once"})," 将所有可能的语言模块合并到同一个异步 chunk 中："]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" language"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" detectVisitorLanguage"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" messages"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:'  /* rspackMode: "lazy-once" */'})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"  `./locales/"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"language"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:".js`"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"rspackprefetch",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rspackprefetch",children:"#"}),"rspackPrefetch"]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"类型："}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"number"}),"：预取优先级"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"boolean"}),"：",(0,r.jsx)(e.code,{children:"false"})," 表示不预取，",(0,r.jsx)(e.code,{children:"true"})," 表示预取且优先级为 ",(0,r.jsx)(e.code,{children:"0"})]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"webpack 兼容名称："})," ",(0,r.jsx)(e.code,{children:"webpackPrefetch"})]}),"\n"]}),"\n",(0,r.jsxs)(e.p,{children:["告诉浏览器将来可能需要该资源来进行某些导航跳转，详情请查看",(0,r.jsx)(e.a,{href:"/zh/guide/optimization/code-splitting.html#prefetchingpreloading-%E6%A8%A1%E5%9D%97",children:"预取/预载模块"}),"。"]}),"\n",(0,r.jsx)(e.p,{children:"例如，当父 chunk 加载后，浏览器会在空闲时预取编辑器 chunk："}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" openEditor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"}

1,children:"() {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"    /* rspackPrefetch: true */"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"    './editor.js'"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"也可以使用数字设置预取优先级："}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"/* rspackPrefetch: 10 */"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './editor.js'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})})})}),"\n",(0,r.jsxs)(e.h4,{id:"rspackpreload",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rspackpreload",children:"#"}),"rspackPreload"]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"类型："}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"number"}),"：预载优先级"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"boolean"}),"：",(0,r.jsx)(e.code,{children:"false"})," 表示不预载，",(0,r.jsx)(e.code,{children:"true"})," 表示预载且优先级为 ",(0,r.jsx)(e.code,{children:"0"})]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"webpack 兼容名称："})," ",(0,r.jsx)(e.code,{children:"webpackPreload"})]}),"\n"]}),"\n",(0,r.jsxs)(e.p,{children:["告诉浏览器在当前导航期间可能需要该资源，详情请查看",(0,r.jsx)(e.a,{href:"/zh/guide/optimization/code-splitting.html#prefetchingpreloading-%E6%A8%A1%E5%9D%97",children:"预取/预载模块"}),"。"]}),"\n",(0,r.jsx)(e.p,{children:"例如，在加载父 chunk 的同时预载图表库："}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderDashboard"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"() {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"renderChart"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"    /* rspackPreload: true */"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"    './chart.js'"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"  renderChart"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"}

1,children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"rspackchunkname",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rspackchunkname",children:"#"}),"rspackChunkName"]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"类型："})," ",(0,r.jsx)(e.code,{children:"string"})]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"webpack 兼容名称："})," ",(0,r.jsx)(e.code,{children:"webpackChunkName"})]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"指定新 chunk 的名称。"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" settings"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:'  /* rspackChunkName: "settings" */'})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"  './settings.js'"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["最终文件名仍由 ",(0,r.jsx)(e.a,{href:"/zh/config/output.html#outputchunkfilename",children:(0,r.jsx)(e.code,{children:"output.chunkFilename"})})," 决定。"]}),"\n",(0,r.jsxs)(e.h4,{id:"rspackfetchpriority",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rspackfetchpriority",children:"#"}),"rspackFetchPriority"]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"类型："})," ",(0,r.jsx)(e.code,{children:'"low" | "high" | "auto"'})]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"webpack 兼容名称："})," ",(0,r.jsx)(e.code,{children:"webpackFetchPriority"})]}),"\n"]}),"\n",(0,r.jsxs)(e.p,{children:["为指定的动态导入设置 ",(0,r.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(e.code,{children:"fetchPriority"})}),"。也可以通过使用 ",(0,r.jsx)(e.code,{children:"module.parser.javascript.dynamicImportFetchPriority"})," 选项为所有动态导入设置全局默认值。"]}),"\n",(0,r.jsx)(e.p,{children:"例如，为首屏关键模块设置较高的获取优先级："}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" hero"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:'  /* rspackFetchPriority: "high" */'})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"  './hero.js'"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"rspackinclude",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rspackinclude",children:"#"}),"rspackInclude"]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"类型："})," ",(0,r.jsx)(e.code,{children:"RegExp"})]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"webpack 兼容名称："})," ",(0,r.jsx)(e.code,{children:"webpackInclude"})]}),"\n"]}),"\n",(0,r.jsxs)(e.p,{children:["在导入解析时匹配的正则表达式。只有匹配的模块",(0,r.jsx)(e.strong,{children:"才会被打包"}),"。"]}),"\n",(0,r.jsxs)(e.p,{children:["例如，只将 ",(0,r.jsx)(e.code,{children:"./locales"})," 目录中的 ",(0,r.jsx)(e.code,{children:".json"})," 文件纳入动态导入上下文："]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" messages"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  /* rspackInclude: /\\.json$/ */"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"  `./locales/"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"language"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"rspackexclude",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rspackexclude",children:"#"}),"rspackExclude"]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"类型："})," ",(0,r.jsx)(e.code,{children:"RegExp"})]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"webpack 兼容名称："})," ",(0,r.jsx)(e.code,{children:"webpackExclude"})]}),"\n"]}),"\n",(0,r.jsxs)(e.p,{children:["在导入解析时匹配的正则表达式。只有匹配的模块",(0,r.jsx)(e.strong,{children:"不会被打包"}),"。"]}),"\n",(0,r.jsxs)(e.p,{children:["例如，排除 ",(0,r.jsx)(e.code,{children:"./locales"})," 目录中的测试文件："]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" messages"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  /* rspackExclude: /\\.test\\.js$/ */"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"  `./locales/"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"language"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:".js`"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(e.p,{children:["\n",(0,r.jsx)(e.code,{children:"rspackInclude"})," 和 ",(0,r.jsx)(e.code,{children:"rspackExclude"})," 只会筛选静态路径前缀（例如 ",(0,r.jsx)(e.code,{children:"./locales"}),"）下发现的候选模块，不会改变该前缀。等价的 ",(0,r.jsx)(e.code,{children:"webpackInclude"})," 和 ",(0,r.jsx)(e.code,{children:"webpackExclude"})," 注释也会被兼容支持。"]}

1)}),"\n",(0,r.jsxs)(e.h4,{id:"rspackexports",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rspackexports",children:"#"}),"rspackExports"]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"类型："})," ",(0,r.jsx)(e.code,{children:"string | string[]"})]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"webpack 兼容名称："})," ",(0,r.jsx)(e.code,{children:"webpackExports"})]}),"\n"]}),"\n",(0,r.jsxs)(e.p,{children:["使 Rspack 在处理该动态 ",(0,r.jsx)(e.code,{children:"import()"})," 模块时仅打包指定的导出。这样可以降低 chunk 的产物体积。"]}),"\n",(0,r.jsx)(e.p,{children:"例如，当导入结果传给其他函数、Rspack 无法静态推断具体使用了哪些导出时，可以显式声明需要的导出："}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" widget"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:'  /* rspackExports: ["render", "version"] */'})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"  './widget.js'"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"consumeWidget"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(widget);"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["如果代码直接访问导入模块的属性或对其进行解构，Rspack 通常可以自动推断使用的导出，无需添加 ",(0,r.jsx)(e.code,{children:"rspackExports"}),"。"]}),"\n",(0,r.jsxs)(e.h2,{id:"commonjs",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#commonjs",children:"#"}),"CommonJS"]}),"\n",(0,r.jsxs)(e.p,{children:["Rspack 也支持 ",(0,r.jsx)(e.code,{children:"CommonJS"})," 语法，可以使用 ",(0,r.jsx)(e.code,{children:"require"})," 和 ",(0,r.jsx)(e.code,{children:"module.exports"})," 语法。"]}),"\n",(0,r.jsxs)(e.h3,{id:"require",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#require",children:"#"}),"require"]}),"\n",(0,r.jsx)(e.p,{children:"以同步的方式引入其他模块。"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(dependency: string);"})]})})})}),"\n",(0,r.jsxs)(e.h3,{id:"requireresolve",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#requireresolve",children:"#"}),"require.resolve"]}),"\n",(0,r.jsxs)(e.p,{children:["以同步的方式获取模块的 ID。此方法会将模块打包进最终的 bundle 中，但不会执行模块代码。返回的模块 ID 主要用于与 ",(0,r.jsx)(e.code,{children:"require.cache[id]"})," 或 Rspack 内部的 ",(0,r.jsx)(e.code,{children:"__webpack_require__(id)"})," 一起使用，在大多数应用场景中应避免直接使用此方法。"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".resolve"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(dependency: string);"})]})})})}),"\n",(0,r.jsx)(l.Pq,{type:"warning",title:"Warning",children:(0,r.jsxs)(e.p,{children:["\n模块 ID 的类型可以是 ",(0,r.jsx)(e.code,{children:"number"})," 或 ",(0,r.jsx)(e.code,{children:"string"}),"，具体取决于 ",(0,r.jsx)(e.code,{children:"optimization.moduleIds"})," 配置。"]})}),"\n",(0,r.jsxs)(e.h3,{id:"requirecache",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#requirecache",children:"#"}),"require.cache"]}

1),"\n",(0,r.jsx)(e.p,{children:"多处引用同一模块，最终只会产生一次模块执行和一次导出。所以，会在运行时（runtime）中会保存一份缓存。删除此缓存，则会产生新的模块执行和新的导出。"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" d1 "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'dependency'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'dependency'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" d1;"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"delete"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".cache["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".resolve"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'dependency'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")];"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'dependency'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"!=="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" d1;"})]})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"requirecontext",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#requirecontext",children:"#"}),"require.context"]}),"\n",(0,r.jsx)(c.a,{specific:["Rspack","Webpack"]}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"require.context"})," 允许你动态地 require 一组模块。"]}),"\n",(0,r.jsxs)(e.p,{children:["你可以在代码中使用 ",(0,r.jsx)(e.code,{children:"require.context"}),"，Rspack 将在构建时进行解析并引用匹配的模块。"]}),"\n",(0,r.jsx)(l.Pq,{type:"tip",title:"Tip",children:(0,r.jsxs)(e.p,{children:["\n",(0,r.jsx)(e.code,{children:"require.context"})," 的返回值与 ",(0,r.jsx)(e.a,{href:"/zh/api/runtime-api/module-variables.html#importmetawebpackcontext",children:"import.meta.webpackContext"})," 相同。"]})}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.strong,{children:"类型："})}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" requireContext"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  /**"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   * 要搜索的目录"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   */"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  directory"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  /**"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   * 是否还搜索其子目录"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   * "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"@default"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" true"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   */"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  includeSubdirs"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  /**"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   * 匹配文件的正则表达式"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   * "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"@default"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" /^\\.\\/.*$/（匹配任意文件）"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   */"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  filter"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RegExp"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  /**"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   * 模块加载模式"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   * "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"@default"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" '"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"sync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"'"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   */"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  mode"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'sync'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'eager'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'weak'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'lazy'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'lazy-once'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Context"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})]})})}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.strong,{children:"示例："})}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// 创建一个上下文，"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// 文件直接来自 test 目录，匹配的文件名以 `.test.js` 结尾。"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" context"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".context"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'./test'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /\\.test\\.js"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"$"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// 创建一个上下文，"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// 文件来自父文件夹及其所有子级文件夹，匹配的文件名以 `.stories.js` 结尾。"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" context"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".context"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'../'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /\\.stories\\.js"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"$"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// 如果 `mode` 被设置为 `lazy`，模块将会被异步加载"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" context"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".context"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'./locales'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /\\.json"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"$"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'lazy'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(l.Pq,{type:"tip",title:"Tip",children:[(0,r.jsxs)(e.p,{children:["\nRspack 在编译时，会通过静态分析来解析 ",(0,r.jsx)(e.code,{children:"require.context"})," 的参数，因此参数必须是",(0,r.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Glossary/Literal",rel:"noopener noreferrer",target:"_blank",children:"字面量"}),"。"]}),(0,r.jsxs)(e.p,{children:["例如，",(0,r.jsx)(e.code,{children:"filter"})," 的值不允许传入一个变量，也不允许传入 ",(0,r.jsx)(e.code,{children:"new RegExp()"})," 生成的值，只能是一个正则表达式字面量。"]})]}),"\n",(0,r.jsxs)(e.h3,{id:"requireensure",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#requireensure",children:"#"}),"require.ensure"]}),"\n",(0,r.jsx)(c.a,{specific:["Rspack","Webpack"]}),"\n",(0,r.jsx)(l.Pq,{type:"tip",title:"Tip",children:(0,r.jsxs)(e.p,{children:["\n建议使用更符合标准的 ",(0,r.jsx)(e.code,{children:"import()"})," 来替代 ",(0,r.jsx)(e.code,{children:"require.ensure()"}),"。"]})}),"\n",(0,r.jsxs)(e.p,{children:["将给定 ",(0,r.jsx)(e.code,{children:"dependencies"})," 单独打包，并异步加载这些依赖。"]}),"\n"

1,(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.strong,{children:"Type:"})}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" requireEnsure"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  /**"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   * 需要异步加载的模块列表"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   */"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  dependencies"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" String"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"[]"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  /**"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   * 当 dependencies 中的模块都加载完毕时，这个函数就会被执行。"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   * 在这个函数中也可以进一步使用 require() 来加载模块。"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   */"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"}

1,children:"  callback"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  /**"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   * 当加载依赖失败的时候执行的函数"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   */"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  errorCallback"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"error"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  /**"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   * 指定由 require.ensure() 生成的 chunk 名称。"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   * 通过指定相同的 chunkName 来合并多个 require.ensure() 调用的代码，从而只生成一个 bundle，"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   * 从而减少浏览器加载的次数。"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"   */"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  chunkName"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Context"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})]})})}),"\n",(0,r.jsx)(l.Pq,{type:"warning",title:"Warning",children:(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:["该特性内部依赖于 ",(0,r.jsx)(e.a,{href:"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise",rel:"noopener noreferrer",target:"_blank",children:"Promise"}),"。 如果你在旧的浏览器上使用 ",(0,r.jsx)(e.code,{children:"require.ensure"}),"， 最好加入 polyfill ",(0,r.jsx)(e.a,{href:"https://github.com/stefanpenner/es6-promise",rel:"noopener noreferrer",target:"_blank",children:"es6-promise"})," 或 ",(0,r.jsx)(e.a,{href:"https://github.com/taylorhakes/promise-polyfill",rel:"noopener noreferrer",target:"_blank",children:"promise-polyfill"}),"。"]}),"\n",(0,r.jsx)(e.li,{children:"和 webpack 一样，callback 函数也可以接收一个名为 require 的参数（且必须名为 require），该 require 参数和 cjs 的 require 全局变量一致，但我们建议直接使用全局的 require 来加载模块而不是该 require 参数，因为 loader 可能会将其重命名导致依赖分析失败。"}),"\n"]})}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.strong,{children:"Example:"})}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" a "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'normal-dep'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"module"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".hot) {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"  require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".ensure"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'b'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"    var"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" c "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'c'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"    // Do something special..."})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"requireresolveweak",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#requireresolveweak",children:"#"}),"require.resolveWeak"]}),"\n",(0,r.jsx)(c.a,{specific:["Rspack","Webpack"]}),"\n",(0,r.jsxs)(e.p,{children:["与 ",(0,r.jsx)(e.code,{children:"require.resolve"}),' 类似，但是不会把 module 打包到最终的 bundle 中。是 "弱（weak）" 依赖。']}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".resolveWeak"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(dependency: string);"})]})})})}),"\n",(0,r.jsx)(e.p,{children:"示例："}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (__webpack_modules__["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".resolveWeak"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'module'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")]) {"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  // 当模块可用时，执行一些操作"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".cache["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".resolveWeak"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'module'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")]) {"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  // 在模块加载完成之前，执行一些操作"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"}

1,children:"// 你可以像执行其他 require/import 方法一样，"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:'// 执行动态解析上下文 resolves ("context")'})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" page"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Foo'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"__webpack_modules__["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".resolveWeak"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`./page/"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"page"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")];"})]})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"data-uri-模块",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#data-uri-模块",children:"#"}),"Data URI 模块"]}),"\n",(0,r.jsxs)(e.p,{children:["Rspack 支持使用 ",(0,r.jsx)(e.code,{children:"import"})," 和 ",(0,r.jsx)(e.code,{children:"require"})," 语法导入 Data URI 模块。"]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.strong,{children:"import"})}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" DataURI "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'data:text/javascript,export default 42'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.strong,{children:"require"})}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'data:text/javascript,module.exports = 42'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})})})}),"\n",(0,r.jsx)(e.p,{children:"除此之外，还支持了 Base64 编码："}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"  number"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"  fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"} "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" require"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgZnVuY3Rpb24gZm4oKSB7CiAgcmV0dXJuICJIZWxsbyB3b3JsZCI7Cn0='"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(l.Pq,{type:"tip",title:"Tip",children:(0,r.jsx)(e.p,{children:"\nData URI 模块可以被用作虚拟模块（Virtual Modules）的实现方式，如：配合 loader 完成运行时动态加载自定义模块。"})}),"\n",(0,r.jsxs)(e.h3,{id:"内置-rules",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#内置-rules",children:"#"}),"内置 Rules"]}),"\n",(0,r.jsxs)(e.p,{children:["Rspack 默认支持这些 ",(0,r.jsx)(e.a,{href:"https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Guides/MIME_types",rel:"noopener noreferrer",target:"_blank",children:"MIME 类型"})," 的 data URI 模块：",(0,r.jsx)(e.code,{children:"application/json"}),"、",(0,r.jsx)(e.code,{children:"text/javascript"}),"、",(0,r.jsx)(e.code,{children:"application/javascript"}),"、",(0,r.jsx)(e.code,{children:"application/node"})," 和 ",(0,r.jsx)(e.code,{children:"application/wasm"}),"。这意味着当你使用这些 MIME 类型创建 data URI 模块时，Rspack 会自动识别他们。"]}),"\n",(0,r.jsx)(e.p,{children:"Rspack 内置的 MIME rules 如下："}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" defaultMimeRules"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  {"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    mimetype"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'application/node'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    type"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'javascript/auto'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  {"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    mimetype"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'application/json'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    type"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'json'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  {"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    mimetype"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"      or"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'text/javascript'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'application/javascript'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    type"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'javascript/esm'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"    // ..."})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  {"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    mimetype"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'application/wasm'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    type"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'webassembly/async'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"    // ..."})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"];"})})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"自定义-rules",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#自å

1®šä¹‰-rules",children:"#"}),"自定义 Rules"]}),"\n",(0,r.jsxs)(e.p,{children:["你可以也使用 ",(0,r.jsx)(e.a,{href:"/zh/config/module-rules.html#rulesmimetype",children:"rules[].mimetype"})," 来扩展 Data URI 模块的匹配规则，例如为 ",(0,r.jsx)(e.code,{children:"text/javascript"})," 添加自定义的 loaders："]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"rspack.config.mjs",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  module"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    rules"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"      {"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"        mimetype"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'text/javascript'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"        use"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"          // ..."})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"        ]"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"      }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    ]"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsx)(o.A,{url:"https://webpack.docschina.org/api/module-methods/"})]})}function h(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,i.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(a,{...s})}):a(s)}h.__RSPRESS_PAGE_META={},h.__RSPRESS_PAGE_META["zh%2Fapi%2Fruntime-api%2Fmodule-methods.mdx"]={toc:[{id:"es-modules-推荐",text:"ES modules (推荐)",depth:2},{id:"import",text:"import",depth:3},{id:"export",text:"export",depth:3},{id:"dynamic-import",text:"Dynamic import()",depth:3},{id:"import-中的动态表达式",text:"import() 中的动态表达式",depth:3},{id:"magic-comments",text:"import() 中的魔法注释",depth:3},{id:"rspackignore",text:"rspackIgnore",depth:4},{id:"rspackmode",text:"rspackMode",depth:4},{id:"rspackprefetch",text:"rspackPrefetch",depth:4},{id:"rspackpreload",text:"rspackPreload",depth:4},{id:"rspackchunkname",text:"rspackChunkName",depth:4}

1,{id:"rspackfetchpriority",text:"rspackFetchPriority",depth:4},{id:"rspackinclude",text:"rspackInclude",depth:4},{id:"rspackexclude",text:"rspackExclude",depth:4},{id:"rspackexports",text:"rspackExports",depth:4},{id:"commonjs",text:"CommonJS",depth:2},{id:"require",text:"require",depth:3},{id:"requireresolve",text:"require.resolve",depth:3},{id:"requirecache",text:"require.cache",depth:3},{id:"requirecontext",text:"require.context",depth:3},{id:"requireensure",text:"require.ensure",depth:3},{id:"requireresolveweak",text:"require.resolveWeak",depth:3},{id:"data-uri-模块",text:"Data URI 模块",depth:2},{id:"内置-rules",text:"内置 Rules",depth:3},{id:"自定义-rules",text:"自定义 Rules",depth:3}],title:"模块方法",headingTitle:"模块方法",frontmatter:{description:"当使用 Rspack 打包应用程序时，你可以选择多种模块语法风格，包括 ES modules 和 CommonJS。"}},n.d(e,{default:()=>h})},yW(s,e,n){var r,i=n("i"),l=n("NC"),o=n("V"),c=n("mT"),a=((r={}).Deprecated="Deprecated",r.Removed="Removed",r.Experimental="Experimental",r);function h(s){let e,n=(0,l.u)(),r=`/${n}/misc/planning/future`,a=s.inline?c.A.tagInline:c.A.tag,h=s.inline?c.A.wrapperInline:c.A.wrapper;return(0,i.jsxs)("div",{className:`${h} rp-not-doc`,children:[s.addedVersion&&(0,i.jsx)("span",{className:`${a} ${c.A.added}`,children:(0,i.jsxs)(o.N_,{href:(e=s.addedVersion,`https://github.com/web-infra-dev/rspack/releases/tag/v${e.replace("v","")}`),children:["Added in v",s.addedVersion]})}),s.deprecatedVersion&&(0,i.jsx)("span",{className:`${a} ${c.A.deprecated}`,children:(0,i.jsxs)(o.N_,{href:r,children:["Deprecated in v",s.deprecatedVersion]})}),s.removedVersion&&(0,i.jsx)("span",{className:`${a} ${c.A.removed}`,children:(0,i.jsxs)(o.N_,{href:r,children:["Removed in v",s.removedVersion]})}),s.stability&&(0,i.jsxs)("div",{className:`${a} ${s.stability?c.A[s.stability.toLowerCase()]:""}`,children:["Stability: ",s.stability]}),s.specific&&s.specific.length>0&&(0,i.jsxs)("span",{className:`${a} ${c.A.specific}`,children:[s.specific.join("/")," ",s.specific.length>1?"specific":"only"]})]})}n.d(e,{a:()=>h,k:()=>a})},sX(s,e,n){var r=n("i"),i=n("NC"),l=n("V");let o="https://creativecommons.org/licenses/by/4.0/",c={borderTop:"1px solid var(--rp-c-divider-light)",color:"var(--rp-c-text-2)",fontSize:"13px",marginTop:"48px",paddingTop:"16px"};e.A=s=>{let{url:e}=s;return"en"===(0,i.u)()?(0,r.jsxs)("p",{style:c,children:["This page is adapted from ",(0,r.jsx)(l.N_,{href:e,children:"webpack documentation"})," ","under the ",(0,r.jsx)(l.N_,{href:o,children:"CC BY 4.0"}),", with modifications."]}):(0,r.jsxs)("p",{style:c,children:["本页改编自 ",(0,r.jsx)(l.N_,{href:e,children:"webpack 文档"}),"，遵循"," ",(0,r.jsx)(l.N_,{href:o,children:"CC BY 4.0"}),"，且已作修改。"]})}}}]);