[{"data":1,"prerenderedAt":294},["ShallowReactive",2],{"term-w\u002Fwebpack":3,"related-w\u002Fwebpack":276},{"id":4,"title":5,"acronym":6,"body":7,"category":256,"description":257,"difficulty":258,"extension":259,"letter":260,"meta":261,"navigation":262,"path":263,"related":264,"seo":270,"sitemap":271,"stem":274,"subcategory":6,"__hash__":275},"terms\u002Fterms\u002Fw\u002Fwebpack.md","Webpack",null,{"type":8,"value":9,"toc":250},"minimark",[10,15,19,23,26,30,239,243,246],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Webpack is the OG bundler — the grumpy grandpa of the JavaScript build world. It can do literally everything, but configuring it feels like defusing a bomb. Extremely powerful, extremely confusing, but it ships your code.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Webpack is a static module bundler for JavaScript applications. It builds a dependency graph from one or more entry points and outputs optimized bundles. It is highly extensible via loaders (for transforming files) and plugins (for broader build tasks), but has a steep configuration curve.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F webpack.config.js\nmodule.exports = {\n  entry: '.\u002Fsrc\u002Findex.js',\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, 'dist')\n  },\n  module: {\n    rules: [\n      { test: \u002F\\.jsx?$\u002F, use: 'babel-loader' }\n    ]\n  }\n}\n","javascript","",[38,39,40,49,62,85,95,112,147,153,163,174,221,227,233],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F webpack.config.js\n",[41,50,52,56,59],{"class":43,"line":51},2,[41,53,55],{"class":54},"sMK4o","module.exports",[41,57,58],{"class":54}," =",[41,60,61],{"class":54}," {\n",[41,63,65,69,72,75,79,82],{"class":43,"line":64},3,[41,66,68],{"class":67},"swJcz","  entry",[41,70,71],{"class":54},":",[41,73,74],{"class":54}," '",[41,76,78],{"class":77},"sfazB",".\u002Fsrc\u002Findex.js",[41,80,81],{"class":54},"'",[41,83,84],{"class":54},",\n",[41,86,88,91,93],{"class":43,"line":87},4,[41,89,90],{"class":67},"  output",[41,92,71],{"class":54},[41,94,61],{"class":54},[41,96,98,101,103,105,108,110],{"class":43,"line":97},5,[41,99,100],{"class":67},"    filename",[41,102,71],{"class":54},[41,104,74],{"class":54},[41,106,107],{"class":77},"bundle.js",[41,109,81],{"class":54},[41,111,84],{"class":54},[41,113,115,118,120,124,127,131,134,137,139,142,144],{"class":43,"line":114},6,[41,116,117],{"class":67},"    path",[41,119,71],{"class":54},[41,121,123],{"class":122},"sTEyZ"," path",[41,125,126],{"class":54},".",[41,128,130],{"class":129},"s2Zo4","resolve",[41,132,133],{"class":122},"(__dirname",[41,135,136],{"class":54},",",[41,138,74],{"class":54},[41,140,141],{"class":77},"dist",[41,143,81],{"class":54},[41,145,146],{"class":122},")\n",[41,148,150],{"class":43,"line":149},7,[41,151,152],{"class":54},"  },\n",[41,154,156,159,161],{"class":43,"line":155},8,[41,157,158],{"class":67},"  module",[41,160,71],{"class":54},[41,162,61],{"class":54},[41,164,166,169,171],{"class":43,"line":165},9,[41,167,168],{"class":67},"    rules",[41,170,71],{"class":54},[41,172,173],{"class":122}," [\n",[41,175,177,180,183,185,188,191,194,197,201,204,206,209,211,213,216,218],{"class":43,"line":176},10,[41,178,179],{"class":54},"      {",[41,181,182],{"class":67}," test",[41,184,71],{"class":54},[41,186,187],{"class":54}," \u002F",[41,189,190],{"class":122},"\\.",[41,192,193],{"class":77},"jsx",[41,195,196],{"class":54},"?",[41,198,200],{"class":199},"s7zQu","$",[41,202,203],{"class":54},"\u002F",[41,205,136],{"class":54},[41,207,208],{"class":67}," use",[41,210,71],{"class":54},[41,212,74],{"class":54},[41,214,215],{"class":77},"babel-loader",[41,217,81],{"class":54},[41,219,220],{"class":54}," }\n",[41,222,224],{"class":43,"line":223},11,[41,225,226],{"class":122},"    ]\n",[41,228,230],{"class":43,"line":229},12,[41,231,232],{"class":54},"  }\n",[41,234,236],{"class":43,"line":235},13,[41,237,238],{"class":54},"}\n",[11,240,242],{"id":241},"when-youll-hear-this","When You'll Hear This",[16,244,245],{},"The Webpack config is 300 lines and nobody touches it.,Webpack's HMR made development so much faster.,We migrated from Webpack to Vite for the DX improvements.",[247,248,249],"style",{},"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}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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);}",{"title":36,"searchDepth":51,"depth":51,"links":251},[252,253,254,255],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":241,"depth":51,"text":242},"frontend","Webpack is the OG bundler — the grumpy grandpa of the JavaScript build world.","intermediate","md","w",{},true,"\u002Fterms\u002Fw\u002Fwebpack",[265,266,267,268,269],"Bundler","Vite","Rollup","esbuild","Hot Module Replacement",{"title":5,"description":257},{"changefreq":272,"priority":273},"weekly",0.7,"terms\u002Fw\u002Fwebpack","5iM8ySUTdwv0r4TGmdUthCTDHonybqYseH3FaH51vHU",[277,281,284,288,291],{"title":265,"path":278,"acronym":6,"category":256,"difficulty":279,"description":280},"\u002Fterms\u002Fb\u002Fbundler","beginner","A bundler is the robot that smashes all your separate JavaScript files, CSS, images, and random imports into one (or a few) neat packages that the browser...",{"title":268,"path":282,"acronym":6,"category":256,"difficulty":258,"description":283},"\u002Fterms\u002Fe\u002Fesbuild","esbuild is a bundler written in Go (not JavaScript) which means it's absolutely unhinged fast — like 10-100x faster than other bundlers.",{"title":269,"path":285,"acronym":286,"category":256,"difficulty":258,"description":287},"\u002Fterms\u002Fh\u002Fhot-module-replacement","HMR","HMR is the magic that makes your browser update instantly when you save a file — without refreshing the whole page and losing your app state.",{"title":267,"path":289,"acronym":6,"category":256,"difficulty":258,"description":290},"\u002Fterms\u002Fr\u002Frollup","Rollup is the bundler you use when you're building a library rather than an app.",{"title":266,"path":292,"acronym":6,"category":256,"difficulty":279,"description":293},"\u002Fterms\u002Fv\u002Fvite","Vite is what happens when someone got sick of waiting 30 seconds for Webpack to start.",1776518258255]