[{"data":1,"prerenderedAt":481},["ShallowReactive",2],{"navigation_docs":3,"-guides-webpack":113,"-guides-webpack-surround":476},[4,31,77,108],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"Getting started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-info",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Using the picker","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage","i-lucide-mouse-pointer-click",{"title":26,"path":27,"stem":28,"icon":29},"Resolving picks","\u002Fgetting-started\u002Fresolve-the-picks","1.getting-started\u002F4.resolve-the-picks","i-lucide-bot",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[37,42,47,52,57,62,67,72],{"title":38,"path":39,"stem":40,"icon":41},"Vite","\u002Fguides\u002Fvite","2.guides\u002F1.vite","i-simple-icons-vite",{"title":43,"path":44,"stem":45,"icon":46},"Nuxt","\u002Fguides\u002Fnuxt","2.guides\u002F2.nuxt","i-simple-icons-nuxtdotjs",{"title":48,"path":49,"stem":50,"icon":51},"SvelteKit","\u002Fguides\u002Fsveltekit","2.guides\u002F3.sveltekit","i-simple-icons-svelte",{"title":53,"path":54,"stem":55,"icon":56},"Astro","\u002Fguides\u002Fastro","2.guides\u002F4.astro","i-simple-icons-astro",{"title":58,"path":59,"stem":60,"icon":61},"Next.js","\u002Fguides\u002Fnext","2.guides\u002F5.next","i-simple-icons-nextdotjs",{"title":63,"path":64,"stem":65,"icon":66},"webpack","\u002Fguides\u002Fwebpack","2.guides\u002F6.webpack","i-simple-icons-webpack",{"title":68,"path":69,"stem":70,"icon":71},"Angular","\u002Fguides\u002Fangular","2.guides\u002F7.angular","i-simple-icons-angular",{"title":73,"path":74,"stem":75,"icon":76},"Plain HTML & more","\u002Fguides\u002Fvanilla","2.guides\u002F8.vanilla","i-lucide-file-code",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":30},"Reference","i-lucide-list","\u002Freference","3.reference",[83,88,93,98,103],{"title":84,"path":85,"stem":86,"icon":87},"Compatibility","\u002Freference\u002Fcompatibility","3.reference\u002F1.compatibility","i-lucide-table",{"title":89,"path":90,"stem":91,"icon":92},"Plugin options","\u002Freference\u002Fplugin-options","3.reference\u002F2.plugin-options","i-lucide-settings-2",{"title":94,"path":95,"stem":96,"icon":97},"CLI","\u002Freference\u002Fcli","3.reference\u002F3.cli","i-lucide-terminal",{"title":99,"path":100,"stem":101,"icon":102},"The pick object","\u002Freference\u002Fpick-object","3.reference\u002F4.pick-object","i-lucide-braces",{"title":104,"path":105,"stem":106,"icon":107},"FAQ & troubleshooting","\u002Freference\u002Ffaq","3.reference\u002F5.faq","i-lucide-help-circle",{"title":109,"path":110,"stem":111,"icon":112},"Sponsor","\u002Fsponsor","4.sponsor","i-lucide-heart",{"id":114,"title":63,"body":115,"description":469,"extension":470,"links":471,"meta":472,"navigation":473,"path":64,"seo":474,"stem":65,"__hash__":475},"docs\u002F2.guides\u002F6.webpack.md",{"type":116,"value":117,"toc":461},"minimark",[118,123,153,157,325,334,338,341,372,376,379,431,435,442,446,457],[119,120,122],"h2",{"id":121},"install","Install",[124,125,131],"pre",{"className":126,"code":127,"filename":128,"language":129,"meta":130,"style":130},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add -D webpack-plugin-quello\n","Terminal","bash","",[132,133,134],"code",{"__ignoreMap":130},[135,136,139,143,147,150],"span",{"class":137,"line":138},"line",1,[135,140,142],{"class":141},"sBMFI","pnpm",[135,144,146],{"class":145},"sfazB"," add",[135,148,149],{"class":145}," -D",[135,151,152],{"class":145}," webpack-plugin-quello\n",[119,154,156],{"id":155},"configure","Configure",[124,158,163],{"className":159,"code":160,"filename":161,"language":162,"meta":130,"style":130},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import HtmlWebpackPlugin from 'html-webpack-plugin'\nimport QuelloWebpackPlugin from 'webpack-plugin-quello'\n\nexport default {\n  plugins: [\n    new HtmlWebpackPlugin({ template: '.\u002Fsrc\u002Findex.html' }),\n    new QuelloWebpackPlugin(),\n  ],\n  devServer: { port: 3000 },\n}\n","webpack.config.js","js",[132,164,165,188,205,212,224,237,275,288,296,319],{"__ignoreMap":130},[135,166,167,171,175,178,182,185],{"class":137,"line":138},[135,168,170],{"class":169},"s7zQu","import",[135,172,174],{"class":173},"sTEyZ"," HtmlWebpackPlugin ",[135,176,177],{"class":169},"from",[135,179,181],{"class":180},"sMK4o"," '",[135,183,184],{"class":145},"html-webpack-plugin",[135,186,187],{"class":180},"'\n",[135,189,191,193,196,198,200,203],{"class":137,"line":190},2,[135,192,170],{"class":169},[135,194,195],{"class":173}," QuelloWebpackPlugin ",[135,197,177],{"class":169},[135,199,181],{"class":180},[135,201,202],{"class":145},"webpack-plugin-quello",[135,204,187],{"class":180},[135,206,208],{"class":137,"line":207},3,[135,209,211],{"emptyLinePlaceholder":210},true,"\n",[135,213,215,218,221],{"class":137,"line":214},4,[135,216,217],{"class":169},"export",[135,219,220],{"class":169}," default",[135,222,223],{"class":180}," {\n",[135,225,227,231,234],{"class":137,"line":226},5,[135,228,230],{"class":229},"swJcz","  plugins",[135,232,233],{"class":180},":",[135,235,236],{"class":173}," [\n",[135,238,240,243,247,250,253,256,258,260,263,266,269,272],{"class":137,"line":239},6,[135,241,242],{"class":180},"    new",[135,244,246],{"class":245},"s2Zo4"," HtmlWebpackPlugin",[135,248,249],{"class":173},"(",[135,251,252],{"class":180},"{",[135,254,255],{"class":229}," template",[135,257,233],{"class":180},[135,259,181],{"class":180},[135,261,262],{"class":145},".\u002Fsrc\u002Findex.html",[135,264,265],{"class":180},"'",[135,267,268],{"class":180}," }",[135,270,271],{"class":173},")",[135,273,274],{"class":180},",\n",[135,276,278,280,283,286],{"class":137,"line":277},7,[135,279,242],{"class":180},[135,281,282],{"class":245}," QuelloWebpackPlugin",[135,284,285],{"class":173},"()",[135,287,274],{"class":180},[135,289,291,294],{"class":137,"line":290},8,[135,292,293],{"class":173},"  ]",[135,295,274],{"class":180},[135,297,299,302,304,307,310,312,316],{"class":137,"line":298},9,[135,300,301],{"class":229},"  devServer",[135,303,233],{"class":180},[135,305,306],{"class":180}," {",[135,308,309],{"class":229}," port",[135,311,233],{"class":180},[135,313,315],{"class":314},"sbssI"," 3000",[135,317,318],{"class":180}," },\n",[135,320,322],{"class":137,"line":321},10,[135,323,324],{"class":180},"}\n",[326,327,328,329,333],"p",{},"It takes ",[330,331,332],"a",{"href":90},"the same options"," as the Vite plugin.",[119,335,337],{"id":336},"how-it-attaches","How it attaches",[326,339,340],{},"Two hooks, and it needs both:",[342,343,344,360],"ul",{},[345,346,347,348,352,353,355,356,359],"li",{},"the ",[349,350,351],"strong",{},"script tag"," goes in through ",[132,354,184],{},"'s ",[132,357,358],{},"alterAssetTagGroups",";",[345,361,347,362,352,365,355,368,371],{},[349,363,364],{},"picks endpoint",[132,366,367],{},"webpack-dev-server",[132,369,370],{},"setupMiddlewares",".",[119,373,375],{"id":374},"without-html-webpack-plugin","Without html-webpack-plugin",[326,377,378],{},"If you write your own HTML there is no generated document to add to. Ask the plugin for the tag and\npaste it into your template:",[124,380,382],{"className":159,"code":381,"filename":161,"language":162,"meta":130,"style":130},"const quello = new QuelloWebpackPlugin()\nconsole.log(quello.scriptTag())\n\u002F\u002F \u003Cscript defer src=\"\u002F__quello\u002Fclient.js\" data-quello-endpoint=\"\u002F__quello\u002Fpicks\" …>\u003C\u002Fscript>\n",[132,383,384,404,425],{"__ignoreMap":130},[135,385,386,390,393,396,399,401],{"class":137,"line":138},[135,387,389],{"class":388},"spNyl","const",[135,391,392],{"class":173}," quello ",[135,394,395],{"class":180},"=",[135,397,398],{"class":180}," new",[135,400,282],{"class":245},[135,402,403],{"class":173},"()\n",[135,405,406,409,411,414,417,419,422],{"class":137,"line":190},[135,407,408],{"class":173},"console",[135,410,371],{"class":180},[135,412,413],{"class":245},"log",[135,415,416],{"class":173},"(quello",[135,418,371],{"class":180},[135,420,421],{"class":245},"scriptTag",[135,423,424],{"class":173},"())\n",[135,426,427],{"class":137,"line":207},[135,428,430],{"class":429},"sHwdD","\u002F\u002F \u003Cscript defer src=\"\u002F__quello\u002Fclient.js\" data-quello-endpoint=\"\u002F__quello\u002Fpicks\" …>\u003C\u002Fscript>\n",[119,432,434],{"id":433},"production","Production",[326,436,437,438,441],{},"The plugin returns early when ",[132,439,440],{},"mode === 'production'",", whatever else the config says. There is no\nway to accidentally ship it.",[119,443,445],{"id":444},"what-a-pick-will-know","What a pick will know",[326,447,448,449,453,454,371],{},"Whatever your framework exposes — the plugin only decides ",[450,451,452],"em",{},"how quello gets in",", never what it can\nread. A Vue app on webpack reports Vue components exactly as it would on Vite. See\n",[330,455,456],{"href":85},"compatibility",[458,459,460],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":130,"searchDepth":190,"depth":190,"links":462},[463,464,465,466,467,468],{"id":121,"depth":190,"text":122},{"id":155,"depth":190,"text":156},{"id":336,"depth":190,"text":337},{"id":374,"depth":190,"text":375},{"id":433,"depth":190,"text":434},{"id":444,"depth":190,"text":445},"The webpack plugin, for projects on webpack-dev-server.","md",null,{},{"icon":66},{"title":63,"description":469},"HtjFZlN-4p_dGJWqbLN3QHHX7iqpIc5gZfcZHn41wQk",[477,479],{"title":58,"path":59,"stem":60,"description":478,"icon":61,"children":-1},"Three lines, one per file Next makes you own.",{"title":68,"path":69,"stem":70,"description":480,"icon":71,"children":-1},"Angular's dev server is not configurable, so quello runs beside it.",1788454296590]