1"use strict";(self.rspackChunkrspack_website=self.rspackChunkrspack_website||[]).push([["gp2"],{xK(s,e,r){r.r(e);var n=r("i"),i=r("fj");function l(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...(0,i.R)(),...s.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h1,{id:"loader",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#loader",children:"#"}),"Loader"]}),"\n",(0,n.jsx)(e.p,{children:"Rspack has built-in support for JavaScript, CSS, JSON, and static assets modules."}),"\n",(0,n.jsx)(e.p,{children:"A loader is a transformer that converts various types of modules into Rspack supported types. By using different kinds of loaders, you can extend Rspack to process additional module types, including JSX, Markdown, Sass, Less, and more."}),"\n",(0,n.jsxs)(e.p,{children:["When Rspack bundles a module, it first pre-processes the module through loaders, transforming it into a Rspack supported module type, and then post-processes the module according to the ",(0,n.jsx)(e.a,{href:"/config/module-rules.html#rulestype",children:"rules[].type"}),"."]}),"\n",(0,n.jsxs)(e.h2,{id:"compatibility-with-webpack-loaders",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#compatibility-with-webpack-loaders",children:"#"}),"Compatibility with webpack loaders"]}),"\n",(0,n.jsxs)(e.p,{children:["Rspack allows you to use most webpack loaders in the community. See ",(0,n.jsx)(e.a,{href:"https://github.com/rstackjs/awesome-rstack?tab=readme-ov-file#rspack-loaders",rel:"noopener noreferrer",target:"_blank",children:"awesome-rstack - Rspack loaders"})," to find loaders provided by the community."]}),"\n",(0,n.jsxs)(e.p,{children:["If you find an unsupported loader, please feel free to communicate with us through ",(0,n.jsx)(e.a,{href:"https://github.com/web-infra-dev/rspack/issues",rel:"noopener noreferrer",target:"_blank",children:"GitHub Issues"}),"."]}),"\n",(0,n.jsxs)(e.h2,{id:"writing-loaders",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#writing-loaders",children:"#"}),"Writing loaders"]}),"\n",(0,n.jsxs)(e.p,{children:["Refer to ",(0,n.jsx)(e.a,{href:"/api/loader-api/writing-loaders.html",children:"Writing loaders"})," to learn how to develop a loader."]}),"\n",(0,n.jsxs)(e.h2,{id:"example",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,n.jsxs)(e.h3,{id:"using-less",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-less",children:"#"}),"Using Less"]}),"\n",(0,n.jsxs)(e.p,{children:["You can use ",(0,n.jsx)(e.a,{href:"https://github.com/webpack/less-loader",rel:"noopener noreferrer",target:"_blank",children:"less-loader"})," to transform the contents of the ",(0,n.jsx)(e.code,{children:".less"})," file accordingly."]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.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,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" rules"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /\\.less"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"$"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" use"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" loader"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'less-loader'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" type"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'css'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.a,{href:"https://github.com/webpack/less-loader",rel:"noopener noreferrer",target:"_blank",children:"less-loader"}
1)," can transform Less files to Rspack-supported CSS module types, so you can set the type to ",(0,n.jsx)(e.code,{children:"'css'"})," to instruct Rspack to use the CSS handling method that is natively supported for post-processing."]}),"\n",(0,n.jsxs)(e.h3,{id:"combining-multiple-loaders",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#combining-multiple-loaders",children:"#"}),"Combining multiple loaders"]}),"\n",(0,n.jsxs)(e.p,{children:["You can chain multiple loaders for a particular ",(0,n.jsx)(e.a,{href:"/config/module-rules.html#rule",children:"Rule"})," match, with the loaders executed in right-to-left order."]}),"\n",(0,n.jsxs)(e.p,{children:["For example, you can use ",(0,n.jsx)(e.a,{href:"https://github.com/webpack/less-loader",rel:"noopener noreferrer",target:"_blank",children:"less-loader"})," to do the transformation between Less to CSS types and ",(0,n.jsx)(e.a,{href:"https://github.com/webpack/postcss-loader",rel:"noopener noreferrer",target:"_blank",children:"postcss-loader"})," for the transformed source code to perform a secondary transformation, which will then get passed to Rspack's CSS post-processor for further processing."]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.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,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" rules"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /\\.less"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"$"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" use"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" loader"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'postcss-loader'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" loader"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'less-loader'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" type"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'css'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsxs)(e.h3,{id:"passing-configuration-items",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#passing-configuration-items",children:"#"}),"Passing configuration items"]}),"\n",(0,n.jsxs)(e.p,{children:["You can use ",(0,n.jsx)(e.a,{href:"/config/module-rules.html#rulesuse",children:"rules[].use"})," to pass the relevant configuration to the loader, for example:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.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,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" rules"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /\\.css"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"$"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" use"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" loader"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'postcss-loader'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" postcssOptions"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" type"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'css'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsxs)(e.h3,{id:"using-a-custom-loader",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-a-custom-loader",children:"#"}),"Using a custom loader"]}),"\n",(0,n.jsx)(e.p,{children:"You can use a custom loader with Rspack. In the example below, we'll use the loader API to write a simple banner-loader."}),"\n",(0,n.jsx)(e.p,{children:"The purpose of the banner-loader is to prepe
1nd a banner comment at the header of each module, such as a license notice:"}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,n.jsxs)(e.code,{children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"/**"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" * MIT Licensed"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" * Copyright (c) 2022-present ByteDance, Inc. and its affiliates."})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" * https://github.com/web-infra-dev/rspack/blob/main/LICENSE"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:["Create a new ",(0,n.jsx)(e.code,{children:"banner-loader.js"})," file under the root of the project with the following content:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"banner-loader.js",lang:"js",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" BANNER"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" `/**"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" * MIT Licensed"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" * Copyright (c) 2022-present ByteDance, Inc. and its affiliates."})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" * https://github.com/web-infra-dev/rspack/blob/main/LICENSE"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" */`"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"exports"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (content) {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" `"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"BANNER"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"\\n"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"content"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:["The first input to this loader is the content of the file, allowing us to process the file content and return the transformed result. The script file must be imported using CommonJS ",(0,n.jsx)(e.code,{children:"require()"}),"."]}),"\n",(0,n.jsxs)(e.p,{children:["For example, to add a banner to all ",(0,n.jsx)(e.code,{children:"*.js"})," files, the configuration might look like this:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.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,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" rules"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /\\.js"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"$"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" loader"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './banner-loader.js'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:["For details, you can refer to ",(0,n.jsx)(e.a,{href:"/api/loader-api/index.html",children:"loader-api"})]}),"\n",(0,n.jsxs)(e.h3,{id:"using-built-in-loader",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-built-in-loader",children:"#"}),"Using built-in loader"]}),"\n",(0,n.jsx)(e.p,{children:"Built-in Loaders offer superior performance compared to JS Loaders, without sacrificing the composability of JS Loaders. The following are some built-in loaders."}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"/guide/features/builtin-swc-loader.html",children:"builtin:swc-loader"})}),"\n",(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"/guide/features/builtin-lightningcss-loader.html",children:"builtin:lightningcss-loader"})}),"\n"]})]})}function o(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,i.R)(),...s.components};return e?(0,n.jsx)(e,{...s,children:(0,n.jsx)(l,{...s})}):l(s)}o.__RSPRESS_PAGE_META={},o.__RSPRESS_PAGE_META["en%2Fguide%2Ffeatures%2Floader.mdx"]={toc:[{id:"compatibility-with-webpack-loaders",text:"Compatibility with webpack loaders",depth:2},{id:"writing-loaders",text:"Writing loaders",depth:2},{id:"example",text:"Example",depth:2},{id:"using-less",text:"Using Less",depth:3},{id:"combining-multiple-loaders",text:"Combining multiple loaders",depth:3},{id:"passing-configuration-items",text:"Passing configuration items",depth:3},{id:"using-a-custom-loader",text:"Using a custom loader",depth:3},{id:"using-built-in-loader",text:"Using built-in loader",depth:3}],title:"Loader",headingTitle:"Loader",frontmatter:{description:"Rspack has built-in supp
1ort for JavaScript, CSS, JSON, and static assets modules"}},r.d(e,{default:()=>o})}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.