https://reactcosmos.org/_next/static/chunks/pages/docs/getting-started/webpack-fcbdd722098ed7fb.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7240],{4883:function(e,s,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/getting-started/webpack",function(){return n(7568)}])},7568:function(e,s,n){"use strict";n.r(s),n.d(s,{__toc:function(){return i}});var o=n(5893),a=n(6997),l=n(2643),r=n(208);let i=[{depth:2,value:"Getting Started",id:"getting-started"},{depth:2,value:"Webpack Config",id:"webpack-config"},{depth:3,value:"Custom Webpack Config",id:"custom-webpack-config"},{depth:3,value:"Webpack Config Override",id:"webpack-config-override"},{depth:3,value:"Output Filename",id:"output-filename"}];function t(e){let s=Object.assign({h1:"h1",p:"p",h2:"h2",pre:"pre",code:"code",span:"span",strong:"strong",a:"a",h3:"h3"},(0,l.a)(),e.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(s.h1,{children:"Webpack"}),"\n",(0,o.jsx)(s.p,{children:"This is a guide for setting up React Cosmos in a Webpack project."}),"\n",(0,o.jsx)(s.h2,{id:"getting-started",children:"Getting Started"}),"\n",(0,o.jsx)(s.p,{children:"Install the required packages:"}),"\n",(0,o.jsxs)(r.mQ,{items:["npm","pnpm","yarn","bun"],storageKey:"selectedPackageManager",children:[(0,o.jsx)(r.OK,{children:(0,o.jsx)(s.pre,{"data-language":"bash","data-theme":"default",hasCopyCode:!0,children:(0,o.jsx)(s.code,{"data-language":"bash","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"npm"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"i"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"-D"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"react-cosmos"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"react-cosmos-plugin-webpack"})]})})})}),(0,o.jsx)(r.OK,{children:(0,o.jsx)(s.pre,{"data-language":"bash","data-theme":"default",hasCopyCode:!0,children:(0,o.jsx)(s.code,{"data-language":"bash","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"pnpm"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"add"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"-D"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"react-cosmos"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"react-cosmos-plugin-webpack"})]})})})}),(0,o.jsx)(r.OK,{children:(0,o.jsx)(s.pre,{"data-language":"bash","data-theme":"default",hasCopyCode:!0,children:(0,o.jsx)(s.code,{"data-language":"bash","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"add"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"--dev"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"react-cosmos"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"react-cosmos-plugin-webpack"})]})})})}),(0,o.jsx)(r.OK,{children:(0,o.jsx)(s.pre,{"data-language":"bash","data-theme":"default",hasCopyCode:!0,children:(0,o.jsx)(s.code,{"data-language":"bash","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"bun"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"add"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"--dev"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"react-cosmos"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"react-cosmos-plugin-webpack"})]})})})})]}),"\n",(0,o.jsxs)(s.p,{children:["Create ",(0,o.jsx)(s.code,{children:"cosmos.config.json"})," and enable the Webpack plugin:"]}),"\n",(0,o.jsx)(s.pre,{"data-language":"json","data-theme":"default",filename:"cosmos.config.json",hasCopyCode:!0,children:(0,o.jsxs)(s.code,{"data-language":"json","data-theme":"default",children:[(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"plugins"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"react-cosmos-plugin-webpack"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"]"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,o.jsxs)(s.p,{children:["Add ",(0,o.jsx)(s.code,{children:"cosmos"})," and ",(0,o.jsx)(s.code,{children:"cosmos-export"})," scripts to package.json:"]}),"\n",(0,o.jsx)(s.pre,{"data-language":"json","data-theme":"default",filename:"package.json",hasCopyCode:!0,children:(0,o.jsxs)(s.code,{"data-language":"json","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"scripts"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"cosmos"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"cosmos"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"cosmos-export"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"cosmos-export"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,o.jsxs)(s.p,{children:["Create a basic fixture at ",(0,o.jsx)(s.code,{children:"src/Hello.fixture.jsx"}),":"]}),"\n",(0,o.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",filename:"src/Hello.fixture.jsx",hasCopyCode:!0,children:(0,o.jsx)(s.code,{"data-language":"jsx","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">Hello World!</"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">;"})]})})}),"\n",(0,o.jsx)(s.p,{children:"Start React Cosmos:"}),"\n",(0,o.jsxs)(r.mQ,{items:["npm","pnpm","yarn","bun"],storageKey:"selectedPackageManager",children:[(0,o.jsx)(r.OK,{children:(0,o.jsx)(s.pre,{"data-language":"bash","data-theme":"default",hasCopyCode:!0,children:(0,o.jsx)(s.code,{"data-language":"bash","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"npm"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"run"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"cosmos"})]})})})}),(0,o.jsx)(r.OK,{children:(0,o.jsx)(s.pre,{"data-language":"bash","data-theme":"default",hasCopyCode:!0,children:(0,o.jsx)(s.code,{"data-language":"bash","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"pnpm"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"run"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"cosmos"})]})})})}),(0,o.jsx)(r.OK,{children:(0,o.jsx)(s.pre,{"data-language":"bash","data-theme":"default",hasCopyCode:!0,children:(0,o.jsx)(s.code,{"data-language":"bash","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"cosmos"})]})})})}),(0,o.jsx)(r.OK,{children:(0,o.jsx)(s.pre,{"data-language":"bash","data-theme":"default",hasCopyCode:!0,children:(0,o.jsx)(s.code,{"data-language":"bash","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"bun"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"run"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"cosmos"})]})})})})]}),"\n",(0,o.jsxs)(s.p,{children:["\uD83D\uDE80 Open ",(0,o.jsx)(s.strong,{children:(0,o.jsx)(s.a,{href:"http://localhost:5000",children:"localhost:5000"})})," in your browser."]}

1),"\n",(0,o.jsxs)(s.p,{children:["The ",(0,o.jsx)(s.code,{children:"Hello"})," fixture will show up in your Cosmos UI and will render when you select it."]}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.strong,{children:"Congratulations \uD83D\uDE0E"})}),"\n",(0,o.jsx)(s.p,{children:"You've taken the first step towards designing reusable components. You're ready to prototype, test and interate on components in isolation."}),"\n",(0,o.jsx)(s.h2,{id:"webpack-config",children:"Webpack Config"}),"\n",(0,o.jsx)(s.p,{children:"Cosmos generates a default Webpack config if a custom one isn't provided."}),"\n",(0,o.jsx)(r.UW,{type:"warning",children:(0,o.jsxs)(s.p,{children:["Cosmos compiles your code using dependencies you already installed in your\nproject. Cosmos will auto include common loaders like ",(0,o.jsx)(s.code,{children:"babel-loader"}),",\n",(0,o.jsx)(s.code,{children:"ts-loader"}),", ",(0,o.jsx)(s.code,{children:"css-loader"}),", etc. in the default Webpack config. Use a ",(0,o.jsx)(s.a,{href:"#custom-webpack-config",children:"custom\nWebpack config"})," for more advanced use cases."]})}),"\n",(0,o.jsx)(r.UW,{type:"warning",children:(0,o.jsxs)(s.p,{children:["Make sure ",(0,o.jsx)(s.code,{children:"html-webpack-plugin"})," is installed in your project."]})}),"\n",(0,o.jsx)(r.UW,{children:(0,o.jsxs)(s.p,{children:["You may also need to create a ",(0,o.jsx)(s.code,{children:".babelrc"})," in your project root."]})}),"\n",(0,o.jsx)(s.h3,{id:"custom-webpack-config",children:"Custom Webpack Config"}),"\n",(0,o.jsx)(s.p,{children:"Probably the most common scenario. Most of us end up with a hairy Webpack config sooner or later."}),"\n",(0,o.jsxs)(s.p,{children:["Cosmos picks up ",(0,o.jsx)(s.code,{children:"webpack.config.js"})," from the project root automatically. Use the ",(0,o.jsx)(s.code,{children:"webpack.configPath"})," setting to provide an existing Webpack config at a different path:"]}),"\n",(0,o.jsx)(s.pre,{"data-language":"json","data-theme":"default",filename:"cosmos.config.json",hasCopyCode:!0,children:(0,o.jsxs)(s.code,{"data-language":"json","data-theme":"default",children:[(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"webpack"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"configPath"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./tools/webpack.config.js"'})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,o.jsx)(r.UW,{type:"info",children:(0,o.jsxs)(s.p,{children:["You can also point to a module inside a dependency, like in the ",(0,o.jsx)(s.a,{href:"create-react-app",children:"Create React\nApp"})," example."]})}),"\n",(0,o.jsx)(s.h3,{id:"webpack-config-override",children:"Webpack Config Override"}),"\n",(0,o.jsxs)(s.p,{children:["Overriding the Webpack config gives you complete control. Use the ",(0,o.jsx)(s.code,{children:"webpack.overridePath"})," setting to point to a module that customizes the Webpack config used by Cosmos."]}),"\n",(0,o.jsx)(s.pre,{"data-language":"json","data-theme":"default",filename:"cosmos.config.json",hasCopyCode:!0,children:(0,o.jsxs)(s.code,{"data-language":"json","data-theme":"default",children:[(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"webpack"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"overridePath"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./webpack.override.js"'})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,o.jsxs)(s.p,{children:["The override function receives a base Webpack config — the default one generated by Cosmos or a custom one loaded from ",(0,o.jsx)(s.code,{children:"webpack.configPath"}),". Extend the input config and return the result."]}),"\n",(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",filename:"webpack.override.js",hasCopyCode:!0,children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"module"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"exports"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (webpackConfig"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" env) "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"webpackConfig "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"/* do your thing */"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" };"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"};"})})]})}),"\n",(0,o.jsx)(s.h3,{id:"output-filename",children:"Output Filename"}),"\n",(0,o.jsxs)(s.p,{children:["Cosmos overwrites ",(0,o.jsx)(s.code,{children:"output.f

1ilename"})," in the Webpack config to ",(0,o.jsx)(s.code,{children:"[name].js"})," by default. Due to caching, this isn't ideal when generating static exports via ",(0,o.jsx)(s.code,{children:"cosmos-export"})," command. Use the ",(0,o.jsx)(s.code,{children:"webpack.includeHashInOutputFilename"})," setting to change the filename template to ",(0,o.jsx)(s.code,{children:"[name].[contenthash].js"}),"."]}),"\n",(0,o.jsx)(s.pre,{"data-language":"json","data-theme":"default",filename:"cosmos.config.json",hasCopyCode:!0,children:(0,o.jsxs)(s.code,{"data-language":"json","data-theme":"default",children:[(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"webpack"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"includeHashInOutputFilename"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})})]})}s.default=(0,a.j)({MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,l.a)(),e.components);return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(t,{...e})}):t(e)},pageOpts:{filePath:"pages/docs/getting-started/webpack.mdx",route:"/docs/getting-started/webpack",timestamp:1790105926e3,title:"Webpack",headings:i},pageNextRoute:"/docs/getting-started/webpack"})}},function(e){e.O(0,[6997,2888,9774,179],function(){return e(e.s=4883)}),_N_E=e.O()}]);