CINXE.COM
<!DOCTYPE html><html lang="en"><head><title data-rh="true">Concepts | 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="Concepts | 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/concepts/"/><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" aria-current="page" class="text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200 !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/concepts/" class="px-5 block"><span>English</span></a></li><li><a href="https://webpack.docschina.org/concepts/" class="px-5 block"><span lang="zh">中文</span></a></li><li><a href="https://webpack.kr/concepts/" 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><div class="bg-gray-100 dark:bg-gray-800 hidden md:block"><div class="md:max-w-[1024px] md:mx-auto md:grid md:grid-flow-col md:justify-end md:gap-x-[20px] md:px-[24px]" data-testid="sub-navigation"><a title="api" class="text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white" href="/api/">API</a><a title="concepts" aria-current="page" class="!text-black dark:!text-white text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white" href="/concepts/">concepts</a><a title="configuration" class="text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white" href="/configuration/">configuration</a><a title="guides" class="text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white" href="/guides/">guides</a><a title="loaders" class="text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white" href="/loaders/">loaders</a><a title="migrate" class="text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white" href="/migrate/">migrate</a><a title="plugins" class="text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white" href="/plugins/">plugins</a></div></div></header></div><div class="container site__content"><div class="sponsors"><div class="sponsors__content"><div class="sponsors__link-wrapper"><a href="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship" target="_blank" rel="noopener noreferrer"><img class="agGridLogo" src="/ag-grid-logo.6a68915181a34a15.png" alt="ag grid" width="220" loading="lazy"/></a></div><div class="sponsors__link-wrapper"><a href="https://charts.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship" target="_blank" rel="noopener noreferrer"><img class="agChartsLogo" src="/ag-charts-logo.f1735fb8902861d2.png" alt="ag charts" width="220" loading="lazy"/></a></div><div class="sponsors__link-wrapper-2"><a href="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship" target="_blank" rel="noopener noreferrer"><div class="sponsors__tagline">Datagrid and Charting for Enterprise Applications</div><div class="sponsors__img__wrapper"><img src="/icon-square-small.9e8aff7a67a5dd20.svg" alt="webpack" width="150" height="150" loading="lazy"/></div><div class="sponsors__footer">Proud to partner with webpack</div></a></div></div></div><nav class="sidebar site__sidebar"><div class="sidebar__inner"><div class="relative z-0 bg-white dark:bg-gray-100 "><select class="text-gray-600 text-14 px-5 py-5 appearance-none box-border border border-gray-200 border-solid flex-col flex w-full rounded-none bg-transparent bg-none"><option selected="" value="5">webpack 5</option><option value="4">webpack 4</option></select><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="absolute right-5 top-5 fill-current text-gray-300 z-[-1]" width="20" height="20"><path d="M4.5 7.5c.5-.4 1-.4 1.6 0l3.9 3.8 4-3.8c.4-.4 1-.4 1.5 0 .4.5.4 1.2 0 1.7l-4.7 4.5a1 1 0 0 1-1.6 0L4.5 9.2c-.4-.5-.4-1.2 0-1.7"></path></svg></div><div class="sidebar-item sidebar-item--disabled`"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="sidebar-item__toggle" width="15" height="17" fill="#175d96"><path d="M10 3.3c-.6 0-1 .4-1.1 1.1v11.2c0 .3.2.6.4.8s.5.4.8.4c.6 0 1-.4 1.1-1.1V4.5c0-.3-.2-.6-.4-.8s-.5-.4-.8-.4"></path></svg><a class="sidebar-item__title sidebar-link__print" href="/concepts/printable/" rel="nofollow noopener noreferrer" alt="Print" title="Print" target="_blank">Print Section<img src="/icon-print.3c147a8b5a684f88.svg" width="27" height="20" alt="Printer Icon"/></a></div><div><div class="sidebar-item sidebar-item--open "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a aria-current="page" class="sidebar-item__title active" href="/concepts/">Concepts</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Entry"><a aria-current="page" class="active" href="/concepts/#entry">Entry</a></li><li class="sidebar-item__anchor" title="Output"><a aria-current="page" class="active" href="/concepts/#output">Output</a></li><li class="sidebar-item__anchor" title="Loaders"><a aria-current="page" class="active" href="/concepts/#loaders">Loaders</a></li><li class="sidebar-item__anchor" title="Plugins"><a aria-current="page" class="active" href="/concepts/#plugins">Plugins</a></li><li class="sidebar-item__anchor" title="Mode"><a aria-current="page" class="active" href="/concepts/#mode">Mode</a></li><li class="sidebar-item__anchor" title="Browser Compatibility"><a aria-current="page" class="active" href="/concepts/#browser-compatibility">Browser Compatibility</a></li><li class="sidebar-item__anchor" title="Environment"><a aria-current="page" class="active" href="/concepts/#environment">Environment</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/concepts/entry-points/">Entry Points</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Single Entry (Shorthand) Syntax"><a class="" href="/concepts/entry-points/#single-entry-shorthand-syntax">Single Entry (Shorthand) Syntax</a></li><li class="sidebar-item__anchor" title="Object Syntax"><a class="" href="/concepts/entry-points/#object-syntax">Object Syntax</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="EntryDescription object"><a class="" href="/concepts/entry-points/#entrydescription-object">EntryDescription object</a></li></ul></li><li class="sidebar-item__anchor" title="Scenarios"><a class="" href="/concepts/entry-points/#scenarios">Scenarios</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Separate App and Vendor Entries"><a class="" href="/concepts/entry-points/#separate-app-and-vendor-entries">Separate App and Vendor Entries</a></li><li class="sidebar-item__anchor" title="Multi-Page Application"><a class="" href="/concepts/entry-points/#multi-page-application">Multi-Page Application</a></li></ul></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/concepts/output/">Output</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Usage"><a class="" href="/concepts/output/#usage">Usage</a></li><li class="sidebar-item__anchor" title="Multiple Entry Points"><a class="" href="/concepts/output/#multiple-entry-points">Multiple Entry Points</a></li><li class="sidebar-item__anchor" title="Advanced"><a class="" href="/concepts/output/#advanced">Advanced</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/concepts/loaders/">Loaders</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Example"><a class="" href="/concepts/loaders/#example">Example</a></li><li class="sidebar-item__anchor" title="Using Loaders"><a class="" href="/concepts/loaders/#using-loaders">Using Loaders</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Configuration"><a class="" href="/concepts/loaders/#configuration">Configuration</a></li><li class="sidebar-item__anchor" title="Inline"><a class="" href="/concepts/loaders/#inline">Inline</a></li></ul></li><li class="sidebar-item__anchor" title="Loader Features"><a class="" href="/concepts/loaders/#loader-features">Loader Features</a></li><li class="sidebar-item__anchor" title="Resolving Loaders"><a class="" href="/concepts/loaders/#resolving-loaders">Resolving Loaders</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/concepts/plugins/">Plugins</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Anatomy"><a class="" href="/concepts/plugins/#anatomy">Anatomy</a></li><li class="sidebar-item__anchor" title="Usage"><a class="" href="/concepts/plugins/#usage">Usage</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Configuration"><a class="" href="/concepts/plugins/#configuration">Configuration</a></li><li class="sidebar-item__anchor" title="Node API"><a class="" href="/concepts/plugins/#node-api">Node API</a></li></ul></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/concepts/configuration/">Configuration</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Introductory Configuration"><a class="" href="/concepts/configuration/#introductory-configuration">Introductory Configuration</a></li><li class="sidebar-item__anchor" title="Multiple Targets"><a class="" href="/concepts/configuration/#multiple-targets">Multiple Targets</a></li><li class="sidebar-item__anchor" title="Using other Configuration Languages"><a class="" href="/concepts/configuration/#using-other-configuration-languages">Using other Configuration Languages</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/concepts/modules/">Modules</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="What is a webpack Module"><a class="" href="/concepts/modules/#what-is-a-webpack-module">What is a webpack Module</a></li><li class="sidebar-item__anchor" title="Supported Module Types"><a class="" href="/concepts/modules/#supported-module-types">Supported Module Types</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/concepts/module-resolution/">Module Resolution</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Resolving rules in webpack"><a class="" href="/concepts/module-resolution/#resolving-rules-in-webpack">Resolving rules in webpack</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Absolute paths"><a class="" href="/concepts/module-resolution/#absolute-paths">Absolute paths</a></li><li class="sidebar-item__anchor" title="Relative paths"><a class="" href="/concepts/module-resolution/#relative-paths">Relative paths</a></li><li class="sidebar-item__anchor" title="Module paths"><a class="" href="/concepts/module-resolution/#module-paths">Module paths</a></li></ul></li><li class="sidebar-item__anchor" title="Resolving Loaders"><a class="" href="/concepts/module-resolution/#resolving-loaders">Resolving Loaders</a></li><li class="sidebar-item__anchor" title="Caching"><a class="" href="/concepts/module-resolution/#caching">Caching</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/concepts/module-federation/">Module Federation</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Motivation"><a class="" href="/concepts/module-federation/#motivation">Motivation</a></li><li class="sidebar-item__anchor" title="Low-level concepts"><a class="" href="/concepts/module-federation/#low-level-concepts">Low-level concepts</a></li><li class="sidebar-item__anchor" title="High-level concepts"><a class="" href="/concepts/module-federation/#high-level-concepts">High-level concepts</a></li><li class="sidebar-item__anchor" title="Building blocks"><a class="" href="/concepts/module-federation/#building-blocks">Building blocks</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="ContainerPlugin (low level)"><a class="" href="/concepts/module-federation/#containerplugin-low-level">ContainerPlugin (low level)</a></li><li class="sidebar-item__anchor" title="ContainerReferencePlugin (low level)"><a class="" href="/concepts/module-federation/#containerreferenceplugin-low-level">ContainerReferencePlugin (low level)</a></li><li class="sidebar-item__anchor" title="ModuleFederationPlugin (high level)"><a class="" href="/concepts/module-federation/#modulefederationplugin-high-level">ModuleFederationPlugin (high level)</a></li></ul></li><li class="sidebar-item__anchor" title="Concept goals"><a class="" href="/concepts/module-federation/#concept-goals">Concept goals</a></li><li class="sidebar-item__anchor" title="Use cases"><a class="" href="/concepts/module-federation/#use-cases">Use cases</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Separate builds per page"><a class="" href="/concepts/module-federation/#separate-builds-per-page">Separate builds per page</a></li><li class="sidebar-item__anchor" title="Components library as container"><a class="" href="/concepts/module-federation/#components-library-as-container">Components library as container</a></li></ul></li><li class="sidebar-item__anchor" title="Dynamic Remote Containers"><a class="" href="/concepts/module-federation/#dynamic-remote-containers">Dynamic Remote Containers</a></li><li class="sidebar-item__anchor" title="Promise Based Dynamic Remotes"><a class="" href="/concepts/module-federation/#promise-based-dynamic-remotes">Promise Based Dynamic Remotes</a></li><li class="sidebar-item__anchor" title="Dynamic Public Path"><a class="" href="/concepts/module-federation/#dynamic-public-path">Dynamic Public Path</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Offer a host API to set the publicPath"><a class="" href="/concepts/module-federation/#offer-a-host-api-to-set-the-publicpath">Offer a host API to set the publicPath</a></li><li class="sidebar-item__anchor" title="Infer publicPath from script"><a class="" href="/concepts/module-federation/#infer-publicpath-from-script">Infer publicPath from script</a></li></ul></li><li class="sidebar-item__anchor" title="Troubleshooting"><a class="" href="/concepts/module-federation/#troubleshooting">Troubleshooting</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Uncaught Error: Shared module is not available for eager consumption"><a class="" href="/concepts/module-federation/#uncaught-error-shared-module-is-not-available-for-eager-consumption">Uncaught Error: Shared module is not available for eager consumption</a></li><li class="sidebar-item__anchor" title="Uncaught Error: Module "./Button" does not exist in container."><a class="" href="/concepts/module-federation/#uncaught-error-module-button-does-not-exist-in-container">Uncaught Error: Module "./Button" does not exist in container.</a></li><li class="sidebar-item__anchor" title="Uncaught TypeError: fn is not a function"><a class="" href="/concepts/module-federation/#uncaught-typeerror-fn-is-not-a-function">Uncaught TypeError: fn is not a function</a></li><li class="sidebar-item__anchor" title="Collision between modules from different remotes"><a class="" href="/concepts/module-federation/#collision-between-modules-from-different-remotes">Collision between modules from different remotes</a></li></ul></li></ul></div></div><div><div class="sidebar-item sidebar-item--disabled"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="sidebar-item__toggle" width="15" height="17" fill="#175d96"><path d="M10 3.3c-.6 0-1 .4-1.1 1.1v11.2c0 .3.2.6.4.8s.5.4.8.4c.6 0 1-.4 1.1-1.1V4.5c0-.3-.2-.6-.4-.8s-.5-.4-.8-.4"></path></svg><a class="sidebar-item__title" href="/concepts/dependency-graph/">Dependency Graph</a></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/concepts/targets/">Targets</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Usage"><a class="" href="/concepts/targets/#usage">Usage</a></li><li class="sidebar-item__anchor" title="Multiple Targets"><a class="" href="/concepts/targets/#multiple-targets">Multiple Targets</a></li><li class="sidebar-item__anchor" title="Resources"><a class="" href="/concepts/targets/#resources">Resources</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/concepts/manifest/">The Manifest</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Runtime"><a class="" href="/concepts/manifest/#runtime">Runtime</a></li><li class="sidebar-item__anchor" title="Manifest"><a class="" href="/concepts/manifest/#manifest">Manifest</a></li><li class="sidebar-item__anchor" title="The Problem"><a class="" href="/concepts/manifest/#the-problem">The Problem</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/concepts/hot-module-replacement/">Hot Module Replacement</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="How It Works"><a class="" href="/concepts/hot-module-replacement/#how-it-works">How It Works</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="In the Application"><a class="" href="/concepts/hot-module-replacement/#in-the-application">In the Application</a></li><li class="sidebar-item__anchor" title="In the Compiler"><a class="" href="/concepts/hot-module-replacement/#in-the-compiler">In the Compiler</a></li><li class="sidebar-item__anchor" title="In a Module"><a class="" href="/concepts/hot-module-replacement/#in-a-module">In a Module</a></li><li class="sidebar-item__anchor" title="In the Runtime"><a class="" href="/concepts/hot-module-replacement/#in-the-runtime">In the Runtime</a></li></ul></li><li class="sidebar-item__anchor" title="Get Started"><a class="" href="/concepts/hot-module-replacement/#get-started">Get Started</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/concepts/why-webpack/">Why webpack</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="IIFEs - Immediately invoked function expressions"><a class="" href="/concepts/why-webpack/#iifes---immediately-invoked-function-expressions">IIFEs - Immediately invoked function expressions</a></li><li class="sidebar-item__anchor" title="Birth of JavaScript Modules happened thanks to Node.js"><a class="" href="/concepts/why-webpack/#birth-of-javascript-modules-happened-thanks-to-nodejs">Birth of JavaScript Modules happened thanks to Node.js</a></li><li class="sidebar-item__anchor" title="npm + Node.js + modules – mass distribution"><a class="" href="/concepts/why-webpack/#npm--nodejs--modules--mass-distribution">npm + Node.js + modules – mass distribution</a></li><li class="sidebar-item__anchor" title="ESM - ECMAScript Modules"><a class="" href="/concepts/why-webpack/#esm---ecmascript-modules">ESM - ECMAScript Modules</a></li><li class="sidebar-item__anchor" title="Automatic Dependency Collection"><a class="" href="/concepts/why-webpack/#automatic-dependency-collection">Automatic Dependency Collection</a></li><li class="sidebar-item__anchor" title="Wouldn't it be nice…"><a class="" href="/concepts/why-webpack/#wouldnt-it-be-nice">Wouldn't it be nice…</a></li></ul></div></div><div><div class="sidebar-item "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="17" fill="#175d96" class="sidebar-item__toggle"><path d="m9.2 4.5 4.5 4.7c.2.2.3.5.3.8s-.1.6-.3.8l-4.5 4.7c-.5.4-1.2.4-1.7 0-.4-.5-.4-1 0-1.6l3.8-3.9-3.8-4c-.4-.4-.4-1 0-1.5.5-.4 1.2-.4 1.7 0"></path></svg><a class="sidebar-item__title" href="/concepts/under-the-hood/">Under The Hood</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="The main parts"><a class="" href="/concepts/under-the-hood/#the-main-parts">The main parts</a></li><li class="sidebar-item__anchor" title="Chunks"><a class="" href="/concepts/under-the-hood/#chunks">Chunks</a></li><li class="sidebar-item__anchor" title="Output"><a class="" href="/concepts/under-the-hood/#output">Output</a></li></ul></div></div></div></nav><section class="page"><div class="markdown"><h1>Concepts</h1><div id="md-content"><p>At its core, <strong>webpack</strong> is a <em>static module bundler</em> for modern JavaScript applications. When webpack processes your application, it internally builds a <a href="/concepts/dependency-graph/">dependency graph</a> from one or more <em>entry points</em> and then combines every module your project needs into one or more <em>bundles</em>, which are static assets to serve your content from.</p> <aside class="tip"><h6 class="tip__prefix">tip</h6><p>Learn more about JavaScript modules and webpack modules <a href="/concepts/modules">here</a>.</p></aside> <p>Since version 4.0.0, <strong>webpack does not require a configuration file</strong> to bundle your project. Nevertheless, it is <a href="/configuration">incredibly configurable</a> to better fit your needs.</p> <p>To get started you only need to understand its <strong>Core Concepts</strong>:</p> <ul> <li><a href="#entry">Entry</a></li> <li><a href="#output">Output</a></li> <li><a href="#loaders">Loaders</a></li> <li><a href="#plugins">Plugins</a></li> <li><a href="#mode">Mode</a></li> <li><a href="#browser-compatibility">Browser Compatibility</a></li> </ul> <p>This document is intended to give a <strong>high-level</strong> overview of these concepts, while providing links to detailed concept-specific use cases.</p> <p>For a better understanding of the ideas behind module bundlers and how they work under the hood, consult these resources:</p> <ul> <li><a href="https://www.youtube.com/watch?v=UNMkLHzofQI">Manually Bundling an Application</a></li> <li><a href="https://www.youtube.com/watch?v=Gc9-7PBqOC8">Live Coding a Basic Module Bundler</a></li> <li><a href="https://github.com/ronami/minipack">Detailed Explanation of a Basic Module Bundler</a></li> </ul> <h2><span id="entry"></span>Entry<a href="#entry" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>An <strong>entry point</strong> indicates which module webpack should use to begin building out its internal <a href="/concepts/dependency-graph/">dependency graph</a>. Webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).</p> <p>By default its value is <code>./src/index.js</code>, but you can specify a different (or multiple) entry points by setting an <a href="/configuration/entry-context/#entry"><code>entry</code> property in the webpack configuration</a>. For example:</p> <p><strong>webpack.config.js</strong></p> <pre><code class="hljs language-js">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">'./path/to/my/entry/file.js'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre> <aside class="tip"><h6 class="tip__prefix">tip</h6><p>Learn more in the <a href="/concepts/entry-points">entry points</a> section.</p></aside> <h2><span id="output"></span>Output<a href="#output" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>The <strong>output</strong> property tells webpack where to emit the <em>bundles</em> it creates and how to name these files. It defaults to <code>./dist/main.js</code> for the main output file and to the <code>./dist</code> folder for any other generated file.</p> <p>You can configure this part of the process by specifying an <code>output</code> field in your configuration:</p> <p><strong>webpack.config.js</strong></p> <pre><code class="hljs language-javascript"><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">'./path/to/my/entry/file.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">'my-first-webpack.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> <p>In the example above, we use the <code>output.filename</code> and the <code>output.path</code> properties to tell webpack the name of our bundle and where we want it to be emitted to. In case you're wondering about the path module being imported at the top, it is a core <a href="https://nodejs.org/api/modules.html">Node.js module</a> that gets used to manipulate file paths.</p> <aside class="tip"><h6 class="tip__prefix">tip</h6><p>The <code>output</code> property has <a href="/configuration/output">many more configurable features</a>. If you want to learn about the concepts behind it, you can <a href="/concepts/output">read more in the output section</a>.</p></aside> <h2><span id="loaders"></span>Loaders<a href="#loaders" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>Out of the box, webpack only understands JavaScript and JSON files. <strong>Loaders</strong> allow webpack to process other types of files and convert them into valid <a href="/concepts/modules">modules</a> that can be consumed by your application and added to the dependency graph.</p> <aside class="warning"><h6 class="warning__prefix">warning</h6><p>One of webpack's specific features is the ability to <code>import</code> any type of module, e.g. <code>.css</code> files, which may not be supported by other bundlers or task runners. We feel this extension of the language is warranted as it allows developers to build a more accurate dependency graph.</p></aside> <p>At a high level, <strong>loaders</strong> have two properties in your webpack configuration:</p> <ol> <li>The <code>test</code> property identifies which file or files should be transformed.</li> <li>The <code>use</code> property indicates which loader should be used to do the transforming.</li> </ol> <p><strong>webpack.config.js</strong></p> <pre><code class="hljs language-javascript"><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> output<span class="token operator">:</span> <span class="token punctuation">{</span> filename<span class="token operator">:</span> <span class="token string">'my-first-webpack.bundle.js'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> module<span class="token operator">:</span> <span class="token punctuation">{</span> rules<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> test<span class="token operator">:</span> <span class="token regex">/\.txt$/</span><span class="token punctuation">,</span> use<span class="token operator">:</span> <span class="token string">'raw-loader'</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> <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre> <p>The configuration above has defined a <code>rules</code> property for a single module with two required properties: <code>test</code> and <code>use</code>. This tells webpack's compiler the following:</p> <blockquote> <p>"Hey webpack compiler, when you come across a path that resolves to a '.txt' file inside of a <code>require()</code>/<code>import</code> statement, <strong>use</strong> the <code>raw-loader</code> to transform it before you add it to the bundle."</p> </blockquote> <aside class="warning"><h6 class="warning__prefix">warning</h6><p>It is important to remember that when defining rules in your webpack config, you are defining them under <code>module.rules</code> and not <code>rules</code>. For your benefit, webpack will warn you if this is done incorrectly.</p></aside> <aside class="warning"><h6 class="warning__prefix">warning</h6><p>Keep in mind that when using regex to match files, you may not quote it. i.e <code>/\.txt$/</code> is not the same as <code>'/\.txt$/'</code> or <code>"/\.txt$/"</code>. The former instructs webpack to match any file that ends with .txt and the latter instructs webpack to match a single file with an absolute path '.txt'; this is likely not your intention.</p></aside> <p>You can check further customization when including loaders in the <a href="/concepts/loaders">loaders section</a>.</p> <h2><span id="plugins"></span>Plugins<a href="#plugins" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.</p> <aside class="tip"><h6 class="tip__prefix">tip</h6><p>Check out the <a href="/api/plugins">plugin interface</a> and how to use it to extend webpack's capabilities.</p></aside> <p>In order to use a plugin, you need to <code>require()</code> it and add it to the <code>plugins</code> array. Most plugins are customizable through options. Since you can use a plugin multiple times in a configuration for different purposes, you need to create an instance of it by calling it with the <code>new</code> operator.</p> <p><strong>webpack.config.js</strong></p> <pre><code class="hljs language-javascript"><span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'html-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//to access built-in plugins</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> module<span class="token operator">:</span> <span class="token punctuation">{</span> rules<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> test<span class="token operator">:</span> <span class="token regex">/\.txt$/</span><span class="token punctuation">,</span> use<span class="token operator">:</span> <span class="token string">'raw-loader'</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> plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span> template<span class="token operator">:</span> <span class="token string">'./src/index.html'</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><span class="token punctuation">;</span></code></pre> <p>In the example above, the <code>html-webpack-plugin</code> generates an HTML file for your application and automatically injects all your generated bundles into this file.</p> <aside class="tip"><h6 class="tip__prefix">tip</h6><p>There are many plugins that webpack provides out of the box! Check out the <a href="/plugins">list of plugins</a>.</p></aside> <p>Using plugins in your webpack configuration is straightforward. However, there are many use cases that are worth further exploration. <a href="/concepts/plugins">Learn more about them here</a>.</p> <h2><span id="mode"></span>Mode<a href="#mode" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>By setting the <code>mode</code> parameter to either <code>development</code>, <code>production</code> or <code>none</code>, you can enable webpack's built-in optimizations that correspond to each environment. The default value is <code>production</code>.</p> <pre><code class="hljs language-javascript">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> mode<span class="token operator">:</span> <span class="token string">'production'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre> <p>Learn more about the <a href="/configuration/mode">mode configuration here</a> and what optimizations take place on each value.</p> <h2><span id="browser-compatibility"></span>Browser Compatibility<a href="#browser-compatibility" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>Webpack supports all browsers that are <a href="https://compat-table.github.io/compat-table/es5/">ES5-compliant</a> (IE8 and below are not supported). Webpack needs <code>Promise</code> for <a href="/guides/code-splitting/#dynamic-imports"><code>import()</code> and <code>require.ensure()</code></a>. If you want to support older browsers, you will need to <a href="/guides/shimming/">load a polyfill</a> before using these expressions.</p> <h2><span id="environment"></span>Environment<a href="#environment" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>Webpack 5 runs on Node.js version 10.13.0+.</p></div><div class="print:hidden mt-20"><a class="text-gray-500 dark:text-gray-500 text-sm cursor-pointer font-sans hover:underline" href="https://github.com/webpack/webpack.js.org/edit/main/src/content/concepts/index.mdx">Edit this page</a><span class="mx-5 text-black font-bold dark:text-white">·</span><a class="text-gray-500 dark:text-gray-500 text-sm cursor-pointer font-sans hover:underline">Print this page</a></div><div class="adjacent-links print:hidden"><div class="adjacent-links__next"><div class="adjacent-links__label--next">Next »</div><a class="adjacent-links__link" href="/concepts/entry-points/">Entry Points</a></div></div><div data-testid="contributors" class="print:hidden"><h2 class="!font-sans !font-normal">18<!-- --> <!-- -->Contributors</h2><div><div class="grid gap-[10px] lg:gap-[15px] grid-cols-contributors"><a href="https://github.com/TheLarkInn"><img width="45" height="45" alt="TheLarkInn" title="TheLarkInn" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/jhnns"><img width="45" height="45" alt="jhnns" title="jhnns" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/grgur"><img width="45" height="45" alt="grgur" title="grgur" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/johnstew"><img width="45" height="45" alt="johnstew" title="johnstew" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/jimrfenner"><img width="45" height="45" alt="jimrfenner" title="jimrfenner" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/TheDutchCoder"><img width="45" height="45" alt="TheDutchCoder" title="TheDutchCoder" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/adambraimbridge"><img width="45" height="45" alt="adambraimbridge" title="adambraimbridge" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/EugeneHlushko"><img width="45" height="45" alt="EugeneHlushko" title="EugeneHlushko" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/jeremenichelli"><img width="45" height="45" alt="jeremenichelli" title="jeremenichelli" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/arjunsajeev"><img width="45" height="45" alt="arjunsajeev" title="arjunsajeev" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/byzyk"><img width="45" height="45" alt="byzyk" title="byzyk" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/yairhaimo"><img width="45" height="45" alt="yairhaimo" title="yairhaimo" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/farskid"><img width="45" height="45" alt="farskid" title="farskid" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/LukeMwila"><img width="45" height="45" alt="LukeMwila" title="LukeMwila" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/Jalitha"><img width="45" height="45" alt="Jalitha" title="Jalitha" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/muhmushtaha"><img width="45" height="45" alt="muhmushtaha" title="muhmushtaha" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/chenxsan"><img width="45" height="45" alt="chenxsan" title="chenxsan" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/RyanGreyling2"><img width="45" height="45" alt="RyanGreyling2" title="RyanGreyling2" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a></div></div></div></div></section></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.a7aa92dc33a0f739.js"></script></body>