1"use strict";(self.rspackChunkswc_site=self.rspackChunkswc_site||[]).push([[1222],{597(s,e,n){n.r(e);var r=n(1987),i=n(7008),o=n(9365);function l(s){let e={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",...(0,i.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"bundling-configuration",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#bundling-configuration",children:"#"}),"Bundling Configuration"]}),"\n",(0,r.jsxs)(o.A,{emoji:"ð§",children:[(0,r.jsxs)(e.p,{children:["This feature will be dropped in v2, in favor of SWC-based bundlers like ",(0,r.jsx)(e.a,{href:"https://parceljs.org/",rel:"noopener noreferrer",target:"_blank",children:"Parcel 2"}),", ",(0,r.jsx)(e.a,{href:"https://turbo.build/pack/docs",rel:"noopener noreferrer",target:"_blank",children:"Turbopack"}),", ",(0,r.jsx)(e.a,{href:"https://rspack.rs/",rel:"noopener noreferrer",target:"_blank",children:"Rspack"}),", ",(0,r.jsx)(e.a,{href:"https://www.farmfe.org/",rel:"noopener noreferrer",target:"_blank",children:"fe-farm"}),"."]}),(0,r.jsx)(e.p,{children:"Please use one of the bundlers instead."})]}),"\n",(0,r.jsx)(e.p,{children:"SWC is able to bundle multiple JavaScript or TypeScript files into one."}),"\n",(0,r.jsxs)(e.p,{children:["This feature is currently named ",(0,r.jsx)(e.code,{children:"spack"}),", but will be renamed to ",(0,r.jsx)(e.code,{children:"swcpack"})," in ",(0,r.jsx)(e.code,{children:"v2"}),". ",(0,r.jsx)(e.code,{children:"spack.config.js"})," will be deprecated for ",(0,r.jsx)(e.code,{children:"swcpack.config.js"}),"."]}),"\n",(0,r.jsxs)(e.p,{children:["View a ",(0,r.jsx)(e.a,{href:"https://github.com/swc-project/pkgs/tree/main/packages/cli/examples/spack-basic",rel:"noopener noreferrer",target:"_blank",children:"basic example of bundling"}),"."]}),"\n",(0,r.jsxs)(e.h2,{id:"configuration",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#configuration",children:"#"}),"Configuration"]}),"\n",(0,r.jsxs)(e.p,{children:["You can configure bundling using ",(0,r.jsx)(e.code,{children:"spack.config.js"})," with similar options to webpack. In the future, we are exploring a webpack compatible plugin system."]}),"\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:"spack.config.js",lang:"js",children:(0,r.jsxs)(e.code,{children:[(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-constant)"},children:"module"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"exports"}),(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:" entry"}),(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:" web"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" __dirname "}),(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:' "/src/index.ts"'}),(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:" output"}),(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:" path"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" __dirname "}),(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:' "/lib"'}),(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.blockquote,{children:["\n",(0,r.jsx)(e.p,{children:"Note: CommonJS is currently required. In the future, ES Modules will be supported."}),"\n"]}),"\n",(0,r.jsxs)(e.p,{children:["If you want auto-completion or type checking for configuration, you can wrap the export with a ",(0,r.jsx)(e.code,{children:"config"})," function from ",(0,r.jsx)(e.code,{children:"@swc/core/spack"}),". It's an identity function with type annotation."]}),"\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:"spack.config.js",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:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"config"}),(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:'"@swc/core/spack"'}),(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-constant)"},children:"module"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"exports"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" config"}),(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:" entry"}),(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:" web"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" __dirname "}),(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:' "/src/index.ts"'}),(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:" output"}),(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:" path"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" __dirname "}),(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:' "/lib"'}),(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.h3,{id:"mode",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#mode",children:"#"}),"mode"]}),"\n",(0,r.jsxs)(e.p,{children:["Possible values: ",(0,r.jsx)(e.code,{children:"production"}),", ",(0,r.jsx)(e.code,{children:"debug"}),", ",(0,r.jsx)(e.code,{children:"none"}),"."]}),"\n",(0,r.jsx)(e.p,{children:"Currently this value is not used, but it will behave similarly to webpack."}),"\n",(0,r.jsxs)(e.h3,{id:"entry",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#entry",children:"#"}),"entry"]}),"\n",(0,r.jsx)(e.p,{children:"Determines the entry of bundling. You may specify a file or a map of bundle name to file path."}),"\n",(0,r.jsxs)(e.blockquote,{children:["\n",(0,r.jsxs)(e.p,{children:["Note: Currently this should be absolute path. You can use ",(0,r.jsx)(e.code,{children:"__dirname"})," to create one."]}),"\n",(0,r.jsxs)(e.p,{children:["In the future, SWC will support using relative paths and will resolve files relative to ",(0,r.jsx)(e.code,{children:"spack.config.js"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(e.h3,{id:"output",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#output",children:"#"}),"output"]}),"\n",(0,r.jsxs)(e.p,{children:["You can change destination directory of the bundler using ",(0,r.jsx)(e.code,{children:"output"}),"."]}),"\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:"spack.config.js",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:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"config"}),(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:'"@swc/core/spack"'}),(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-constant)"},children:"module"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"exports"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" config"}),(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:" output"}),(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:" path"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" __dirname "}),(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:' "/lib"'}),(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)"}
1,children:" // Name is optional."})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" name"}),(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:' "index.js"'}),(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.h3,{id:"options",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options",children:"#"}),"options"]}),"\n",(0,r.jsx)(e.p,{children:"Used to control the behavior of SWC. This field is optional."})]})}function a(){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)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["docs%2Fconfiguration%2Fbundling.mdx"]={toc:[{id:"configuration",text:"Configuration",depth:2},{id:"mode",text:"mode",depth:3},{id:"entry",text:"entry",depth:3},{id:"output",text:"output",depth:3},{id:"options",text:"options",depth:3}],title:"Bundling Configuration",headingTitle:"Bundling Configuration",frontmatter:{}},n.d(e,{default:()=>a})},9365(s,e,n){var r=n(1987);let i={default:"ð¡",warning:"â ï¸"};function o(s){let{type:e="default",emoji:n,children:o}=s,l=e in i?e:"default";return(0,r.jsxs)("div",{className:`swc-callout swc-callout--${l}`,children:[(0,r.jsx)("span",{className:"swc-callout__emoji","aria-hidden":!0,children:n??i[l]}),(0,r.jsx)("div",{className:"swc-callout__content",children:o})]})}n.d(e,{A:()=>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.