CINXE.COM
<!DOCTYPE html><html lang="en"><head><title data-rh="true">webpack</title><meta data-rh="true" charset="utf-8"/><meta data-rh="true" name="theme-color" content="#2B3A42"/><meta data-rh="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-rh="true" name="description" content="webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset."/><meta data-rh="true" property="og:site_name" content="webpack"/><meta data-rh="true" property="og:type" content="website"/><meta data-rh="true" property="og:title" content="webpack"/><meta data-rh="true" property="og:description" name="description" content="webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset."/><meta data-rh="true" property="og:image" content="https://webpack.js.org/icon-pwa-512x512.934507c816afbcdb.png"/><meta data-rh="true" property="twitter:card" content="summary"/><meta data-rh="true" property="twitter:site" content="@webpack"/><meta data-rh="true" property="twitter:creator" content="@webpack"/><meta data-rh="true" property="twitter:domain" content="https://webpack.js.org/"/><meta data-rh="true" name="mobile-web-app-capable" content="yes"/><meta data-rh="true" name="apple-mobile-web-app-capable" content="yes"/><meta data-rh="true" name="apple-mobile-web-app-status-bar-style" content="black"/><meta data-rh="true" name="apple-mobile-web-app-title" content="webpack"/><meta data-rh="true" name="msapplication-TileImage" content="/icon_150x150.png"/><meta data-rh="true" name="msapplication-TileColor" content="#465e69"/><link data-rh="true" rel="icon" type="image/x-icon" href="/favicon.a3dd58d3142f7566.ico"/><link data-rh="true" rel="manifest" href="/manifest.json"/><link data-rh="true" rel="canonical" href="https://webpack.js.org/"/><link data-rh="true" rel="icon" sizes="192x192" href="/icon_192x192.png"/><link data-rh="true" rel="icon" sizes="512x512" href="/icon_512x512.png"/><link data-rh="true" rel="apple-touch-icon" href="/icon_180x180.png"/><link data-rh="true" rel="mask-icon" href="/logo-on-white-bg.4a16a9aed80e42ee.svg" color="#465e69"/><link rel="stylesheet" href=/index.93d749b6c038c22c.css /><link rel="stylesheet" href=/4513.869f0846a132527b.css /></head><body><div id="root"><div class="site"><div class="site__header"><header class="bg-blue-800 dark:bg-gray-900"><div class="flex items-center py-10 px-[16px] justify-between md:px-[24px] md:max-w-[1024px] md:mx-auto md:justify-start"><button class="bg-transparent border-none md:hidden"><svg viewBox="-62 138 25 25" width="20" height="20" class="fill-current text-white"><path fill="currentColor" d="M-60.2 140.2h20.9c1 0 1.8.8 1.8 1.8s-.8 1.8-1.8 1.8h-20.9c-1 0-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8M-60.2 148.7h20.9c1 0 1.8.8 1.8 1.8s-.8 1.8-1.8 1.8h-20.9c-1 0-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8M-60.2 157.2h20.9c1 0 1.8.8 1.8 1.8s-.8 1.8-1.8 1.8h-20.9c-1 0-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8"></path></svg></button><a class="md:mr-auto" href="/"><img class="logo" src="/site-logo.c0e60df418e04f58.svg" alt="webpack logo" width="122" height="35"/></a><nav class="hidden md:inline-grid md:grid-flow-col md:gap-x-[18px]"><a aria-label="webpack documentation" class="text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200" href="/concepts/">Documentation</a><a aria-label="contribute to webpack" class="text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200" href="/contribute/">Contribute</a><a aria-label="webpack blog" class="text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200" href="/blog/">Blog</a><div class="relative "><a href="https://github.com/webpack/webpack" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200" aria-label="webpack on GitHub"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" width="16"><path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 6.8 9.5c.5 0 .7-.2.7-.5v-1.7C6.7 20 6.1 18 6.1 18c-.4-1.2-1-1.5-1-1.5-1-.6 0-.6 0-.6 1 0 1.5 1 1.5 1 .9 1.6 2.4 1.1 3 .9 0-.7.3-1.1.6-1.4-2.2-.2-4.6-1-4.6-4.9 0-1.1.4-2 1-2.7 0-.3-.4-1.3.2-2.7 0 0 .8-.2 2.7 1a9.4 9.4 0 0 1 5 0c2-1.2 2.8-1 2.8-1 .5 1.4.1 2.4 0 2.7.7.7 1 1.6 1 2.7 0 3.8-2.3 4.7-4.5 5 .4.2.7.8.7 1.8V21c0 .3.2.6.7.5 4-1.3 6.8-5 6.8-9.5A10 10 0 0 0 12 2"></path></svg></a></div><div class="relative "><a href="https://x.com/webpack" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200" aria-label="webpack on X"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" width="16"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg></a></div><div class="relative "><a href="https://stackoverflow.com/questions/tagged/webpack" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200" aria-label="webpack on StackOverflow"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" width="16"><path d="M17.4 20.2v-5.4h1.8V22H3v-7.2h1.8v5.4zM6.8 14.3l.3-1.7 8.8 1.8-.3 1.8zm1.1-4.2.8-1.6 8.1 3.8-.7 1.6zm2.3-4 1.1-1.4 7 5.8-1.2 1.4L10 6m4.7-4L20 9l-1.4 1-5.4-7 1.4-1m-8 16.5v-1.8h9v1.8z"></path></svg></a></div><nav class="dropdown "><button aria-haspopup="true" aria-expanded="false" aria-label="Select language"><svg viewBox="0 0 610 560" xmlns="http://www.w3.org/2000/svg" class="dropdown__language text-gray-100 hover:text-blue-200 transition-colors duration-200"><path d="m304.8 99.2-162.5-57.3v353.6l162.5-52.6z"></path><path d="m300.9 99 168.7-57.3v353.6l-168.7-52.5zm-200.7 358.4 200.7-66.9v-291.5l-200.7 66.9z" fill="currentColor"></path><path d="m392.4 461.8 28.4 46.8 15-43.5zm-223.9-262.3c-1.1-1 1.4 8.6 4.8 12 6.1 6.1 10.8 6.9 13.3 7 5.6.2 12.5-1.4 16.5-3.1s10.9-5.2 13.5-10.4c.6-1.1 2.1-3 1.1-7.5-.7-3.5-3-4.8-5.7-4.6s-11 2.4-15 3.6-12.2 3.7-15.8 4.5-11.5-.3-12.7-1.5zm101.2 114.8c-1.6-.6-34.3-14.1-38.9-16.4a368 368 0 0 0 -17.5-7.5c12.3-19 20.1-33.4 21.2-35.6 1.9-4 15-29.5 15.3-31.1s.7-7.5.4-8.9-5.1 1.3-11.6 3.5-18.9 10.2-23.7 11.2-20.1 6.8-28 9.4c-7.8 2.6-22.7 7.1-28.8 8.8-6.1 1.6-11.4 1.8-14.9 2.8 0 0 .5 4.8 1.4 6.2s4.1 5 7.9 5.9c3.8 1 10 .6 12.8-.1s7.7-3.1 8.4-4.1c.7-1.1-.3-4.3.8-5.3s16.1-4.5 21.7-6.2 27.2-9.2 30.1-8.8a916 916 0 0 1 -23.9 47.7 821 821 0 0 1 -45 63.3c-5.3 6-18 21.5-22.4 25 1.1.3 9-.4 10.4-1.3 8.9-5.5 23.8-24.1 28.6-29.7a489.1 489.1 0 0 0 36.7-49.4c1.9.8 17.6 13.6 21.7 16.4a293 293 0 0 0 23.7 13.3c3.5 1.5 16.9 7.7 17.5 5.6.7-1.8-2.3-14.1-3.9-14.7z"></path><path clip-rule="evenodd" d="m194.1 484.7a204.9 204.9 0 0 0 30.7 14.5 233.6 233.6 0 0 0 46.4 12c.5 0 16 1.9 19.2 1.9h15.7c6.1-.5 11.8-.9 17.9-1.7 4.9-.7 10.3-1.6 15.5-2.8 3.8-.9 7.8-1.7 11.7-3 3.7-1 7.8-2.4 11.8-3.8l8.2-3.1c2.3-1 5.1-2.3 7.7-3.3a243 243 0 0 0 19.2-10c2.3-1.2 7.5-5.2 10.3-5.2 3.1 0 5.2 2.8 5.2 5.2 0 5.1-6.8 6.6-9.9 8.9-3.3 2.3-7.3 4-10.8 5.9-7 3.7-14.1 6.8-20.9 9.4a251 251 0 0 1 -27.3 8.5c-3.3.7-6.6 1.6-9.9 2.1-1.7.3-19.9 3.1-24.9 3.1h-23a293.9 293.9 0 0 1 -35.1-5.2 196 196 0 0 1 -33.1-10.3c-12-4.5-24.6-10.5-36.4-18.3-2.1-1.4-2.3-2.8-2.3-4.4a5 5 0 0 1 5.1-5.1c2.4.1 8 4.2 9 4.7zm101.4-98.1-189.9 63.2v-280.1l189.9-63.2zm10.6-288.3v292.7a6 6 0 0 1 -1.2 2.6c-.3.5-1 1.2-1.6 1.4a14621 14621 0 0 1 -203.1 67.6c-2.1 0-4-1.4-5.1-3.7 0-.2-.2-.3-.2-.7v-292.8c.3-.9.5-2.1 1.2-2.8 1.4-1.9 3.8-2.3 5.4-2.8 3-1 196.1-65.8 198.9-65.8 1.9 0 5.7 1.2 5.7 4.3z" fill-rule="evenodd"></path><path clip-rule="evenodd" d="m464.3 388-158-49.1v-236l158-53.7zm10.6-345.8v352.4c-.2 4-3 5.7-5.6 5.7-2.3 0-18.6-5.6-21.4-6.4l-65.8-20.4-14.6-4.7-12.9-4c-18.6-5.7-37.6-11.5-56.3-17.8-.7-.2-2.4-2.6-2.4-3.1v-246.1c.3-.9.7-1.9 1.6-2.6 1.4-1.6 61.1-21.4 84.7-29.3 6.3-2.3 84.8-29.3 87.3-29.3 3 .1 5.4 2.3 5.4 5.6z" fill-rule="evenodd"></path><path d="m515 461.8-211.1-67.3.9-292.8 210.2 66.9z"></path><path clip-rule="evenodd" d="m408.6 232.5-20.7 50.1 38.1 11.5zm-12.4-47.2 27.2 8.2 49.5 178.6-27.9-8.5-10-36.7-57.7-17.5-12.4 29.9-27.9-8.5z" fill="currentColor" fill-rule="evenodd"></path></svg><i aria-hidden="true" class="dropdown__arrow"></i></button><div class="dropdown__list "><ul><li><a href="https://webpack.js.org/" class="px-5 block"><span>English</span></a></li><li><a href="https://webpack.docschina.org/" class="px-5 block"><span lang="zh">中文</span></a></li><li><a href="https://webpack.kr/" class="px-5 block"><span lang="ko">한국어</span></a></li></ul></div></nav></nav><div class="inline-flex items-center ml-[18px]"><div class="relative "><button aria-label="Switch to dark theme" class="bg-transparent border-none cursor-pointer text-[16px] p-0 inline-flex items-center text-gray-100 hover:text-blue-200 transition-colors duration-200" data-testid="hello-darkness"><svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 18.14a.722.722 0 0 0-.722.722v2.166a.722.722 0 0 0 1.444 0v-2.166a.722.722 0 0 0-.722-.721ZM12 2.25a.722.722 0 0 0-.722.722v2.166a.722.722 0 0 0 1.444 0V2.972A.722.722 0 0 0 12 2.25ZM5.86 12a.722.722 0 0 0-.723-.722H2.972a.722.722 0 0 0 0 1.444h2.165A.722.722 0 0 0 5.86 12ZM21.028 11.278h-2.165a.722.722 0 0 0 0 1.444h2.165a.722.722 0 0 0 0-1.444ZM7.148 16.13a.72.72 0 0 0-.51.21l-1.533 1.534a.72.72 0 1 0 1.022 1.022l1.532-1.533a.724.724 0 0 0-.51-1.233ZM16.852 7.87a.72.72 0 0 0 .51-.21l1.533-1.533a.72.72 0 0 0 .211-.511.72.72 0 0 0-.722-.722.72.72 0 0 0-.51.21L16.34 6.639a.72.72 0 0 0-.211.51.72.72 0 0 0 .722.722ZM6.127 5.105a.72.72 0 0 0-.511-.211.72.72 0 0 0-.722.722.72.72 0 0 0 .21.51L6.638 7.66a.72.72 0 0 0 .511.211.72.72 0 0 0 .722-.722.72.72 0 0 0-.21-.51L6.126 5.105ZM17.363 16.34a.72.72 0 1 0-1.022 1.022l1.532 1.533a.72.72 0 0 0 1.022 0 .72.72 0 0 0 0-1.021l-1.532-1.533ZM12 7.5c-2.48 0-4.5 2.02-4.5 4.5s2.02 4.5 4.5 4.5 4.5-2.02 4.5-4.5-2.02-4.5-4.5-4.5Z" fill="currentColor"></path></svg></button></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></header></div><div class="splash"><section class="splash-viz dark:bg-gray-900"><h1 class="splash-viz__heading"><span> bundle your</span><div class="text-rotater"><div class="text-rotater__wrap" style="height:0;width:110px"><span> assets </span><span> scripts </span></div></div></h1><div class="splash-viz__modules"> <svg viewBox="0 0 1088 615" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke-width="1" fill="none" fill-rule="evenodd"> <text font-family="'Source Sans Pro', sans-serif" font-size="18" font-weight="600" fill="#86A5BA"> <tspan x="933.778" y="459">STATIC ASSETS</tspan> </text> <g transform="translate(1002, 326)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-1"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="84" height="84" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="18.891" y="46.7096774">.png</tspan> </text> </g> <g transform="translate(1002, 214)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-2"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="84" height="84" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="22.532" y="46.7096774">.css</tspan> </text> </g> <g transform="translate(894, 326)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-3"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="84" height="84" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="21.817" y="46.7096774">.jpg</tspan> </text> </g> <g transform="translate(894, 214)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-4"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="84" height="84" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="29" y="46.7096774">.js</tspan> </text> </g> <g transform="translate(342, 225)" stroke="#7E8C94" stroke-width="4"> <path d="M499.558824,86.52 C499.558824,86.52 484.852941,81.02 439.908088,109.436667 C394.963235,137.853333 380.992647,164.436667 380.992647,164.436667" stroke-dasharray="7"></path> <path d="M499.558824,86.0616667 C499.558824,86.0616667 484.852941,91.5616667 439.908088,63.145 C394.963235,34.7283333 380.992647,8.145 380.992647,8.145" stroke-dasharray="7"></path> <path d="M0.477941176,170.395 C0.477941176,170.395 169.382939,98.895 447.847936,98.895" stroke-dasharray="6"></path> <path d="M0.477941176,72.395 C0.477941176,72.395 169.382939,0.895 447.847936,0.895" stroke-dasharray="6" transform="translate(224.162939, 36.645000) scale(1, -1) translate(-224.162939, -36.645000) "></path> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="18" font-weight="600" fill="#86A5BA"> <tspan x="24.934" y="562">MODULES WITH DEPENDENCIES</tspan> </text> <g transform="translate(228, 335)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-5"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="12.817" y="38">.jpg</tspan> </text> </g> <g transform="translate(228, 223)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-6"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="9.891" y="38">.png</tspan> </text> </g> <g transform="translate(302, 414.500000) scale(1, -1) translate(-302, -414.500000) translate(182, 404)"> <rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect> <rect fill="#BBDBEC" x="76" y="6" width="2" height="12"></rect> <rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect> <polyline stroke="#BBDBEC" stroke-width="2" points="80 12 77 20.8000002 74 12"></polyline> </g> <g transform="translate(116, 391)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-7"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="8.076" y="38">.sass</tspan> </text> </g> <g transform="translate(116, 279)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-8"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="8.076" y="38">.sass</tspan> </text> </g> <g transform="translate(182, 201)"> <rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect> <rect fill="#BBDBEC" x="76" y="113" width="2" height="12"></rect> <rect fill="#BBDBEC" transform="translate(75.304690, 111.704683) rotate(-45) translate(-75.304690, -111.704683) " x="74.3046896" y="108.879683" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="26" y="109" width="48" height="2"></rect> <rect fill="#BBDBEC" transform="translate(24.704683, 108.304690) rotate(-45) translate(-24.704683, -108.304690) " x="23.7046835" y="105.47969" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="22" y="6" width="2" height="101"></rect> <rect fill="#BBDBEC" transform="translate(21.304690, 4.704683) rotate(-45) translate(-21.304690, -4.704683) " x="20.3046896" y="1.87968342" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="2" y="2" width="18" height="2"></rect> <polyline stroke="#BBDBEC" stroke-width="2" points="80 118 77 126.8 74 118"></polyline> </g> <g transform="translate(182, 189)"> <rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect> <rect fill="#BBDBEC" x="76" y="6" width="2" height="19"></rect> <rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect> <polyline stroke="#BBDBEC" stroke-width="2" points="80 18 77 26.8000002 74 18"></polyline> </g> <g transform="translate(116, 167)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-9"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="20" y="38">.js</tspan> </text> </g> <g transform="translate(110, 470.500000) scale(1, -1) translate(-190, -470.500000) translate(150, 460)"> <rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect> <rect fill="#BBDBEC" x="76" y="6" width="2" height="12"></rect> <rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect> <polyline stroke="#BBDBEC" stroke-width="2" points="80 12 77 20.8000002 74 12"></polyline> </g> <g transform="translate(4, 447)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-10"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="8.076" y="38">.sass</tspan> </text> </g> <g transform="translate(70, 363)"> <rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect> <rect fill="#BBDBEC" x="76" y="6" width="2" height="12"></rect> <rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect> <polyline stroke="#BBDBEC" stroke-width="2" points="80 12 77 20.8000002 74 12"></polyline> </g> <g transform="translate(4, 335)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-11"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="15.38" y="38">.cjs</tspan> </text> </g> <g transform="translate(38, 307)"> <rect fill="#BBDBEC" x="0" y="22" width="6" height="2"></rect> <rect fill="#BBDBEC" x="2" y="6" width="2" height="16"></rect> <rect fill="#BBDBEC" transform="translate(4.704683, 4.704683) rotate(45) translate(-4.704683, -4.704683) " x="3.70468347" y="1.87968342" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="6" y="2" width="62" height="2"></rect> <polyline stroke="#BBDBEC" stroke-width="2" transform="translate(66.400000, 3) rotate(270) translate(-66.400000, -3) " points="69.4000001 -1.4000001 66.4000001 7.4000001 63.4000001 -1.4000001"></polyline> </g> <g transform="translate(26, 289)"> <polyline stroke="#BBDBEC" stroke-width="2" points="6 30 3 38.8000002 0 30"></polyline> <rect fill="#BBDBEC" x="2" y="0" width="2" height="39"></rect> <rect fill="#BBDBEC" x="0" y="0" width="6" height="2"></rect> </g> <g transform="translate(110, 246.500000) scale(1, -1) translate(-190, -246.500000) translate(150, 236)"> <rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect> <rect fill="#BBDBEC" x="76" y="6" width="2" height="12"></rect> <rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect> <polyline stroke="#BBDBEC" stroke-width="2" points="80 12 77 20.8000002 74 12"></polyline> </g> <g transform="translate(4, 223)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-12"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="10.947" y="38">.hbs</tspan> </text> </g> <g transform="translate(32, 177)"> <polyline stroke="#BBDBEC" stroke-width="2" points="6 30 3 38.8000002 0 30"></polyline> <rect fill="#BBDBEC" x="2" y="0" width="2" height="39"></rect> <rect fill="#BBDBEC" x="0" y="0" width="6" height="2"></rect> </g> <g transform="translate(4, 111)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-13"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="20" y="38">.js</tspan> </text> </g> </g> </svg></div><div class="cube__container splash-viz__cube" style="width:180px;height:180px;padding-left:70.58823529411765px"><span class="cube cube--dark" style="width:120px;padding-bottom:60px"><figure class="cube__outer" style="width:120px;height:120px;transform:translateX(-50%) scale3d(1,1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg)"><section class="cube__face" style="transform:rotateX(0deg) translateZ(60px);border-top-width:1px;border-right-width:6px;border-bottom-width:6px;border-left-width:1px"></section><section class="cube__face" style="transform:rotateX(-90deg) translateZ(60px);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px"></section><section class="cube__face" style="transform:rotateX(90deg) translateZ(60px);border-top-width:6px;border-right-width:6px;border-bottom-width:1px;border-left-width:1px"></section><section class="cube__face" style="transform:rotateY(-90deg) translateZ(60px);border-top-width:1px;border-right-width:1px;border-bottom-width:6px;border-left-width:6px"></section><section class="cube__face" style="transform:rotateY(90deg) translateZ(60px);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px"></section><section class="cube__face" style="transform:rotateY(180deg) translateZ(60px);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px"></section></figure><figure class="cube__inner" style="width:120px;height:120px;transform:translateX(-50%) translateY(2px) scale3d(0.5,0.5,0.5) rotateX(0deg) rotateY(0deg) rotateZ(0deg)"><section class="cube__face" style="transform:rotateX(0deg) translateZ(60px)"></section><section class="cube__face" style="transform:rotateX(-90deg) translateZ(60px)"></section><section class="cube__face" style="transform:rotateX(90deg) translateZ(60px)"></section><section class="cube__face" style="transform:rotateY(-90deg) translateZ(60px)"></section><section class="cube__face" style="transform:rotateY(90deg) translateZ(60px)"></section><section class="cube__face" style="transform:rotateY(180deg) translateZ(60px)"></section></figure></span></div></section><div class="splash__section splash__section--dark page__content"><div class="container "><div class="markdown"><h2><span id="write-your-code"></span>Write Your Code<a href="#write-your-code" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <div class="splash__wrap"><div class="splash__left"><p><strong>src/index.js</strong></p> <pre><code class="hljs language-js"><span class="token keyword">import</span> bar <span class="token keyword">from</span> <span class="token string">'./bar.js'</span><span class="token punctuation">;</span> <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="splash__right"><p><strong>src/bar.js</strong></p> <pre><code class="hljs language-js"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//</span> <span class="token punctuation">}</span></code></pre></div></div> <h2><span id="bundle-it"></span>Bundle It<a href="#bundle-it" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <div class="splash__wrap"><div class="splash__left"><p><strong><a href="https://youtu.be/3Nv9muOkb6k?t=21293">Without config</a></strong> or provide custom <strong>webpack.config.js</strong></p> <pre><code class="hljs language-js"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> entry<span class="token operator">:</span> <span class="token string">'./src/index.js'</span><span class="token punctuation">,</span> output<span class="token operator">:</span> <span class="token punctuation">{</span> path<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'dist'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> filename<span class="token operator">:</span> <span class="token string">'bundle.js'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div><div class="splash__right"><p><strong>page.html</strong></p> <pre><code class="hljs language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dist/bundle.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre></div></div> <p>Then run <code>webpack</code> on the command-line to create <code>bundle.js</code>.</p> <h2><span id="awesome-isnt-it-lets-dive-in"></span>Awesome, isn't it? Let's dive in!<a href="#awesome-isnt-it-lets-dive-in" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p><strong><a href="/guides/getting-started">Get Started</a></strong> quickly in our <strong>Guides</strong> section, or dig into the <strong><a href="/concepts">Concepts</a></strong> section for more high-level information on the core notions behind webpack.</p></div></div></div><div class="splash__section page__content"><div class="container "><div class="markdown"><h1 id="sponsors">Support the Team</h1><p>Through contributions, donations, and sponsorship, you allow webpack to thrive. Your donations directly support office hours, continued enhancements, and most importantly, great documentation and learning material!</p><h2>Latest Sponsors</h2><div class="placeholder"><p> </p><p> </p><p> </p></div><h2>Platinum Sponsors</h2><div class="placeholder"><p> </p><p> </p><p> </p></div><h2>Gold Sponsors</h2><div class="placeholder"><p> </p><p> </p><p> </p></div><h2>Silver Sponsors</h2><div class="placeholder"><p> </p><p> </p><p> </p></div><h2>Bronze Sponsors</h2><div class="placeholder"><p> </p><p> </p><p> </p></div><h2>Backers</h2><div class="placeholder"><p> </p><p> </p><p> </p></div></div></div></div></div><footer class="footer"><div class="container footer__inner"><section class="footer__left"><a class="footer__link" href="/guides/getting-started/">Get Started</a><a class="footer__link" href="/comparison/">Comparison</a><a href="https://privacy-policy.openjsf.org/" target="_blank" rel="noopener noreferrer" class="footer__link">Privacy Policy</a></section><section class="footer__middle"><a class="footer__icon" href="/"><img src="/icon-square-small.9e8aff7a67a5dd20.svg" alt="webpack icon" width="35" height="35"/></a></section><section class="footer__right"><a href="https://webpack.threadless.com/" target="_blank" rel="noopener noreferrer" class="footer__link">Swag Store</a><a class="footer__link" href="/awesome-webpack/">Awesome webpack</a><a class="footer__link" href="/glossary/">Glossary</a><a class="footer__link" href="/branding/">Branding</a><a href="https://gitter.im/webpack/webpack" target="_blank" rel="noopener noreferrer" class="footer__link">Gitter</a><a href="https://github.com/webpack/webpack/releases" target="_blank" rel="noopener noreferrer" class="footer__link">Changelog</a><a class="footer__link footer__license" href="/license"><img alt="Creative Commons License" src="/cc.185f5779f354f6e9.svg" width="25" height="25"/><img alt="Creative Commons License" src="/by.d2da85793ea9d7bd.svg" width="25" height="25"/></a></section></div></footer></div></div><script src="/vendor.817bc9c70027aefa.js"></script><script src="/index.7f78304bc266ef40.js"></script></body>