CINXE.COM
<!DOCTYPE html><html lang="en"><head><title data-rh="true">Shimming | 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="Shimming | 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/guides/shimming/"/><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/guides/shimming/" class="px-5 block"><span>English</span></a></li><li><a href="https://webpack.docschina.org/guides/shimming/" class="px-5 block"><span lang="zh">中文</span></a></li><li><a href="https://webpack.kr/guides/shimming/" 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" class="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" 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="/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="/guides/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--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="/guides/">Guides</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="/guides/getting-started/">Getting Started</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Basic Setup"><a class="" href="/guides/getting-started/#basic-setup">Basic Setup</a></li><li class="sidebar-item__anchor" title="Creating a Bundle"><a class="" href="/guides/getting-started/#creating-a-bundle">Creating a Bundle</a></li><li class="sidebar-item__anchor" title="Modules"><a class="" href="/guides/getting-started/#modules">Modules</a></li><li class="sidebar-item__anchor" title="Using a Configuration"><a class="" href="/guides/getting-started/#using-a-configuration">Using a Configuration</a></li><li class="sidebar-item__anchor" title="NPM Scripts"><a class="" href="/guides/getting-started/#npm-scripts">NPM Scripts</a></li><li class="sidebar-item__anchor" title="Conclusion"><a class="" href="/guides/getting-started/#conclusion">Conclusion</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="/guides/asset-management/">Asset Management</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Setup"><a class="" href="/guides/asset-management/#setup">Setup</a></li><li class="sidebar-item__anchor" title="Loading CSS"><a class="" href="/guides/asset-management/#loading-css">Loading CSS</a></li><li class="sidebar-item__anchor" title="Loading Images"><a class="" href="/guides/asset-management/#loading-images">Loading Images</a></li><li class="sidebar-item__anchor" title="Loading Fonts"><a class="" href="/guides/asset-management/#loading-fonts">Loading Fonts</a></li><li class="sidebar-item__anchor" title="Loading Data"><a class="" href="/guides/asset-management/#loading-data">Loading Data</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Customize parser of JSON modules"><a class="" href="/guides/asset-management/#customize-parser-of-json-modules">Customize parser of JSON modules</a></li></ul></li><li class="sidebar-item__anchor" title="Global Assets"><a class="" href="/guides/asset-management/#global-assets">Global Assets</a></li><li class="sidebar-item__anchor" title="Wrapping up"><a class="" href="/guides/asset-management/#wrapping-up">Wrapping up</a></li><li class="sidebar-item__anchor" title="Next guide"><a class="" href="/guides/asset-management/#next-guide">Next guide</a></li><li class="sidebar-item__anchor" title="Further Reading"><a class="" href="/guides/asset-management/#further-reading">Further Reading</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="/guides/output-management/">Output Management</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Preparation"><a class="" href="/guides/output-management/#preparation">Preparation</a></li><li class="sidebar-item__anchor" title="Setting up HtmlWebpackPlugin"><a class="" href="/guides/output-management/#setting-up-htmlwebpackplugin">Setting up HtmlWebpackPlugin</a></li><li class="sidebar-item__anchor" title="Cleaning up the /dist folder"><a class="" href="/guides/output-management/#cleaning-up-the-dist-folder">Cleaning up the /dist folder</a></li><li class="sidebar-item__anchor" title="The Manifest"><a class="" href="/guides/output-management/#the-manifest">The Manifest</a></li><li class="sidebar-item__anchor" title="Conclusion"><a class="" href="/guides/output-management/#conclusion">Conclusion</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="/guides/development/">Development</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Using source maps"><a class="" href="/guides/development/#using-source-maps">Using source maps</a></li><li class="sidebar-item__anchor" title="Choosing a Development Tool"><a class="" href="/guides/development/#choosing-a-development-tool">Choosing a Development Tool</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Using Watch Mode"><a class="" href="/guides/development/#using-watch-mode">Using Watch Mode</a></li><li class="sidebar-item__anchor" title="Using webpack-dev-server"><a class="" href="/guides/development/#using-webpack-dev-server">Using webpack-dev-server</a></li><li class="sidebar-item__anchor" title="Using webpack-dev-middleware"><a class="" href="/guides/development/#using-webpack-dev-middleware">Using webpack-dev-middleware</a></li></ul></li><li class="sidebar-item__anchor" title="Adjusting Your Text Editor"><a class="" href="/guides/development/#adjusting-your-text-editor">Adjusting Your Text Editor</a></li><li class="sidebar-item__anchor" title="Conclusion"><a class="" href="/guides/development/#conclusion">Conclusion</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="/guides/code-splitting/">Code Splitting</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Entry Points"><a class="" href="/guides/code-splitting/#entry-points">Entry Points</a></li><li class="sidebar-item__anchor" title="Prevent Duplication"><a class="" href="/guides/code-splitting/#prevent-duplication">Prevent Duplication</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Entry dependencies"><a class="" href="/guides/code-splitting/#entry-dependencies">Entry dependencies</a></li><li class="sidebar-item__anchor" title="SplitChunksPlugin"><a class="" href="/guides/code-splitting/#splitchunksplugin">SplitChunksPlugin</a></li></ul></li><li class="sidebar-item__anchor" title="Dynamic Imports"><a class="" href="/guides/code-splitting/#dynamic-imports">Dynamic Imports</a></li><li class="sidebar-item__anchor" title="Prefetching/Preloading modules"><a class="" href="/guides/code-splitting/#prefetchingpreloading-modules">Prefetching/Preloading modules</a></li><li class="sidebar-item__anchor" title="Bundle Analysis"><a class="" href="/guides/code-splitting/#bundle-analysis">Bundle Analysis</a></li><li class="sidebar-item__anchor" title="Next Steps"><a class="" href="/guides/code-splitting/#next-steps">Next Steps</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="/guides/caching/">Caching</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Output Filenames"><a class="" href="/guides/caching/#output-filenames">Output Filenames</a></li><li class="sidebar-item__anchor" title="Extracting Boilerplate"><a class="" href="/guides/caching/#extracting-boilerplate">Extracting Boilerplate</a></li><li class="sidebar-item__anchor" title="Module Identifiers"><a class="" href="/guides/caching/#module-identifiers">Module Identifiers</a></li><li class="sidebar-item__anchor" title="Conclusion"><a class="" href="/guides/caching/#conclusion">Conclusion</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="/guides/author-libraries/">Authoring Libraries</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Authoring a Library"><a class="" href="/guides/author-libraries/#authoring-a-library">Authoring a Library</a></li><li class="sidebar-item__anchor" title="Webpack Configuration"><a class="" href="/guides/author-libraries/#webpack-configuration">Webpack Configuration</a></li><li class="sidebar-item__anchor" title="Expose the Library"><a class="" href="/guides/author-libraries/#expose-the-library">Expose the Library</a></li><li class="sidebar-item__anchor" title="Externalize Lodash"><a class="" href="/guides/author-libraries/#externalize-lodash">Externalize Lodash</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="External Limitations"><a class="" href="/guides/author-libraries/#external-limitations">External Limitations</a></li></ul></li><li class="sidebar-item__anchor" title="Final Steps"><a class="" href="/guides/author-libraries/#final-steps">Final Steps</a></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="/guides/environment-variables/">Environment Variables</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="/guides/build-performance/">Build Performance</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="General"><a class="" href="/guides/build-performance/#general">General</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Stay Up to Date"><a class="" href="/guides/build-performance/#stay-up-to-date">Stay Up to Date</a></li><li class="sidebar-item__anchor" title="Loaders"><a class="" href="/guides/build-performance/#loaders">Loaders</a></li><li class="sidebar-item__anchor" title="Bootstrap"><a class="" href="/guides/build-performance/#bootstrap">Bootstrap</a></li><li class="sidebar-item__anchor" title="Resolving"><a class="" href="/guides/build-performance/#resolving">Resolving</a></li><li class="sidebar-item__anchor" title="Dlls"><a class="" href="/guides/build-performance/#dlls">Dlls</a></li><li class="sidebar-item__anchor" title="Smaller = Faster"><a class="" href="/guides/build-performance/#smaller--faster">Smaller = Faster</a></li><li class="sidebar-item__anchor" title="Worker Pool"><a class="" href="/guides/build-performance/#worker-pool">Worker Pool</a></li><li class="sidebar-item__anchor" title="Persistent cache"><a class="" href="/guides/build-performance/#persistent-cache">Persistent cache</a></li><li class="sidebar-item__anchor" title="Custom plugins/loaders"><a class="" href="/guides/build-performance/#custom-pluginsloaders">Custom plugins/loaders</a></li><li class="sidebar-item__anchor" title="Progress plugin"><a class="" href="/guides/build-performance/#progress-plugin">Progress plugin</a></li></ul></li><li class="sidebar-item__anchor" title="Development"><a class="" href="/guides/build-performance/#development">Development</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Incremental Builds"><a class="" href="/guides/build-performance/#incremental-builds">Incremental Builds</a></li><li class="sidebar-item__anchor" title="Compile in Memory"><a class="" href="/guides/build-performance/#compile-in-memory">Compile in Memory</a></li><li class="sidebar-item__anchor" title="stats.toJson speed"><a class="" href="/guides/build-performance/#statstojson-speed">stats.toJson speed</a></li><li class="sidebar-item__anchor" title="Devtool"><a class="" href="/guides/build-performance/#devtool">Devtool</a></li><li class="sidebar-item__anchor" title="Avoid Production Specific Tooling"><a class="" href="/guides/build-performance/#avoid-production-specific-tooling">Avoid Production Specific Tooling</a></li><li class="sidebar-item__anchor" title="Minimal Entry Chunk"><a class="" href="/guides/build-performance/#minimal-entry-chunk">Minimal Entry Chunk</a></li><li class="sidebar-item__anchor" title="Avoid Extra Optimization Steps"><a class="" href="/guides/build-performance/#avoid-extra-optimization-steps">Avoid Extra Optimization Steps</a></li><li class="sidebar-item__anchor" title="Output Without Path Info"><a class="" href="/guides/build-performance/#output-without-path-info">Output Without Path Info</a></li><li class="sidebar-item__anchor" title="Node.js Versions 8.9.10-9.11.1"><a class="" href="/guides/build-performance/#nodejs-versions-8910-9111">Node.js Versions 8.9.10-9.11.1</a></li><li class="sidebar-item__anchor" title="TypeScript Loader"><a class="" href="/guides/build-performance/#typescript-loader">TypeScript Loader</a></li></ul></li><li class="sidebar-item__anchor" title="Production"><a class="" href="/guides/build-performance/#production">Production</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Source Maps"><a class="" href="/guides/build-performance/#source-maps">Source Maps</a></li></ul></li><li class="sidebar-item__anchor" title="Specific Tooling Issues"><a class="" href="/guides/build-performance/#specific-tooling-issues">Specific Tooling Issues</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Babel"><a class="" href="/guides/build-performance/#babel">Babel</a></li><li class="sidebar-item__anchor" title="TypeScript"><a class="" href="/guides/build-performance/#typescript">TypeScript</a></li><li class="sidebar-item__anchor" title="Sass"><a class="" href="/guides/build-performance/#sass">Sass</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="/guides/csp/">Content Security Policies</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Examples"><a class="" href="/guides/csp/#examples">Examples</a></li><li class="sidebar-item__anchor" title="Enabling CSP"><a class="" href="/guides/csp/#enabling-csp">Enabling CSP</a></li><li class="sidebar-item__anchor" title="Trusted Types"><a class="" href="/guides/csp/#trusted-types">Trusted 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="/guides/development-vagrant/">Development - Vagrant</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Configuring the Project"><a class="" href="/guides/development-vagrant/#configuring-the-project">Configuring the Project</a></li><li class="sidebar-item__anchor" title="Running the Server"><a class="" href="/guides/development-vagrant/#running-the-server">Running the Server</a></li><li class="sidebar-item__anchor" title="Advanced Usage with nginx"><a class="" href="/guides/development-vagrant/#advanced-usage-with-nginx">Advanced Usage with nginx</a></li><li class="sidebar-item__anchor" title="Conclusion"><a class="" href="/guides/development-vagrant/#conclusion">Conclusion</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="/guides/dependency-management/">Dependency Management</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="require with expression"><a class="" href="/guides/dependency-management/#require-with-expression">require with expression</a></li><li class="sidebar-item__anchor" title="require.context"><a class="" href="/guides/dependency-management/#requirecontext">require.context</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="context module API"><a class="" href="/guides/dependency-management/#context-module-api">context module 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="/guides/installation/">Installation</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Prerequisites"><a class="" href="/guides/installation/#prerequisites">Prerequisites</a></li><li class="sidebar-item__anchor" title="Local Installation"><a class="" href="/guides/installation/#local-installation">Local Installation</a></li><li class="sidebar-item__anchor" title="Global Installation"><a class="" href="/guides/installation/#global-installation">Global Installation</a></li><li class="sidebar-item__anchor" title="Bleeding Edge"><a class="" href="/guides/installation/#bleeding-edge">Bleeding Edge</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="/guides/hot-module-replacement/">Hot Module Replacement</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Enabling HMR"><a class="" href="/guides/hot-module-replacement/#enabling-hmr">Enabling HMR</a></li><li class="sidebar-item__anchor" title="Via the Node.js API"><a class="" href="/guides/hot-module-replacement/#via-the-nodejs-api">Via the Node.js API</a></li><li class="sidebar-item__anchor" title="Gotchas"><a class="" href="/guides/hot-module-replacement/#gotchas">Gotchas</a></li><li class="sidebar-item__anchor" title="HMR with Stylesheets"><a class="" href="/guides/hot-module-replacement/#hmr-with-stylesheets">HMR with Stylesheets</a></li><li class="sidebar-item__anchor" title="Other Code and Frameworks"><a class="" href="/guides/hot-module-replacement/#other-code-and-frameworks">Other Code and Frameworks</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="/guides/tree-shaking/">Tree Shaking</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Add a Utility"><a class="" href="/guides/tree-shaking/#add-a-utility">Add a Utility</a></li><li class="sidebar-item__anchor" title="Mark the file as side-effect-free"><a class="" href="/guides/tree-shaking/#mark-the-file-as-side-effect-free">Mark the file as side-effect-free</a></li><li class="sidebar-item__anchor" title="Clarifying tree shaking and sideEffects"><a class="" href="/guides/tree-shaking/#clarifying-tree-shaking-and-sideeffects">Clarifying tree shaking and sideEffects</a></li><li class="sidebar-item__anchor" title="Mark a function call as side-effect-free"><a class="" href="/guides/tree-shaking/#mark-a-function-call-as-side-effect-free">Mark a function call as side-effect-free</a></li><li class="sidebar-item__anchor" title="Minify the Output"><a class="" href="/guides/tree-shaking/#minify-the-output">Minify the Output</a></li><li class="sidebar-item__anchor" title="Conclusion"><a class="" href="/guides/tree-shaking/#conclusion">Conclusion</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="/guides/production/">Production</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Setup"><a class="" href="/guides/production/#setup">Setup</a></li><li class="sidebar-item__anchor" title="NPM Scripts"><a class="" href="/guides/production/#npm-scripts">NPM Scripts</a></li><li class="sidebar-item__anchor" title="Specify the Mode"><a class="" href="/guides/production/#specify-the-mode">Specify the Mode</a></li><li class="sidebar-item__anchor" title="Minification"><a class="" href="/guides/production/#minification">Minification</a></li><li class="sidebar-item__anchor" title="Source Mapping"><a class="" href="/guides/production/#source-mapping">Source Mapping</a></li><li class="sidebar-item__anchor" title="Minimize CSS"><a class="" href="/guides/production/#minimize-css">Minimize CSS</a></li><li class="sidebar-item__anchor" title="CLI Alternatives"><a class="" href="/guides/production/#cli-alternatives">CLI Alternatives</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="/guides/lazy-loading/">Lazy Loading</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Example"><a class="" href="/guides/lazy-loading/#example">Example</a></li><li class="sidebar-item__anchor" title="Frameworks"><a class="" href="/guides/lazy-loading/#frameworks">Frameworks</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="/guides/ecma-script-modules/">ECMAScript Modules</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Exporting"><a class="" href="/guides/ecma-script-modules/#exporting">Exporting</a></li><li class="sidebar-item__anchor" title="Importing"><a class="" href="/guides/ecma-script-modules/#importing">Importing</a></li><li class="sidebar-item__anchor" title="Flagging modules as ESM"><a class="" href="/guides/ecma-script-modules/#flagging-modules-as-esm">Flagging modules as ESM</a></li></ul></div></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="/guides/shimming/">Shimming</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Shimming Globals"><a aria-current="page" class="active" href="/guides/shimming/#shimming-globals">Shimming Globals</a></li><li class="sidebar-item__anchor" title="Granular Shimming"><a aria-current="page" class="active" href="/guides/shimming/#granular-shimming">Granular Shimming</a></li><li class="sidebar-item__anchor" title="Global Exports"><a aria-current="page" class="active" href="/guides/shimming/#global-exports">Global Exports</a></li><li class="sidebar-item__anchor" title="Loading Polyfills"><a aria-current="page" class="active" href="/guides/shimming/#loading-polyfills">Loading Polyfills</a></li><li class="sidebar-item__anchor" title="Further Optimizations"><a aria-current="page" class="active" href="/guides/shimming/#further-optimizations">Further Optimizations</a></li><li class="sidebar-item__anchor" title="Node Built-Ins"><a aria-current="page" class="active" href="/guides/shimming/#node-built-ins">Node Built-Ins</a></li><li class="sidebar-item__anchor" title="Other Utilities"><a aria-current="page" class="active" href="/guides/shimming/#other-utilities">Other Utilities</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="/guides/typescript/">TypeScript</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Basic Setup"><a class="" href="/guides/typescript/#basic-setup">Basic Setup</a></li><li class="sidebar-item__anchor" title="Ways to Use TypeScript in webpack.config.ts"><a class="" href="/guides/typescript/#ways-to-use-typescript-in-webpackconfigts">Ways to Use TypeScript in webpack.config.ts</a></li><li class="sidebar-item__anchor" title="Loader"><a class="" href="/guides/typescript/#loader">Loader</a></li><li class="sidebar-item__anchor" title="Source Maps"><a class="" href="/guides/typescript/#source-maps">Source Maps</a></li><li class="sidebar-item__anchor" title="Client types"><a class="" href="/guides/typescript/#client-types">Client types</a></li><li class="sidebar-item__anchor" title="Using Third Party Libraries"><a class="" href="/guides/typescript/#using-third-party-libraries">Using Third Party Libraries</a></li><li class="sidebar-item__anchor" title="Importing Other Assets"><a class="" href="/guides/typescript/#importing-other-assets">Importing Other Assets</a></li><li class="sidebar-item__anchor" title="Build Performance"><a class="" href="/guides/typescript/#build-performance">Build Performance</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="/guides/web-workers/">Web Workers</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Syntax"><a class="" href="/guides/web-workers/#syntax">Syntax</a></li><li class="sidebar-item__anchor" title="Example"><a class="" href="/guides/web-workers/#example">Example</a></li><li class="sidebar-item__anchor" title="Node.js"><a class="" href="/guides/web-workers/#nodejs">Node.js</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="/guides/progressive-web-application/">Progressive Web Application</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="We Don't Work Offline Now"><a class="" href="/guides/progressive-web-application/#we-dont-work-offline-now">We Don't Work Offline Now</a></li><li class="sidebar-item__anchor" title="Adding Workbox"><a class="" href="/guides/progressive-web-application/#adding-workbox">Adding Workbox</a></li><li class="sidebar-item__anchor" title="Registering Our Service Worker"><a class="" href="/guides/progressive-web-application/#registering-our-service-worker">Registering Our Service Worker</a></li><li class="sidebar-item__anchor" title="Conclusion"><a class="" href="/guides/progressive-web-application/#conclusion">Conclusion</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="/guides/public-path/">Public Path</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Use Cases"><a class="" href="/guides/public-path/#use-cases">Use Cases</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Environment Based"><a class="" href="/guides/public-path/#environment-based">Environment Based</a></li><li class="sidebar-item__anchor" title="On The Fly"><a class="" href="/guides/public-path/#on-the-fly">On The Fly</a></li><li class="sidebar-item__anchor" title="Automatic publicPath"><a class="" href="/guides/public-path/#automatic-publicpath">Automatic publicPath</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="/guides/integrations/">Integrations</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="NPM Scripts"><a class="" href="/guides/integrations/#npm-scripts">NPM Scripts</a></li><li class="sidebar-item__anchor" title="Grunt"><a class="" href="/guides/integrations/#grunt">Grunt</a></li><li class="sidebar-item__anchor" title="Gulp"><a class="" href="/guides/integrations/#gulp">Gulp</a></li><li class="sidebar-item__anchor" title="Mocha"><a class="" href="/guides/integrations/#mocha">Mocha</a></li><li class="sidebar-item__anchor" title="Karma"><a class="" href="/guides/integrations/#karma">Karma</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="/guides/asset-modules/">Asset Modules</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Public Path"><a class="" href="/guides/asset-modules/#public-path">Public Path</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="On The Fly Override"><a class="" href="/guides/asset-modules/#on-the-fly-override">On The Fly Override</a></li></ul></li><li class="sidebar-item__anchor" title="Resource assets"><a class="" href="/guides/asset-modules/#resource-assets">Resource assets</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Custom output filename"><a class="" href="/guides/asset-modules/#custom-output-filename">Custom output filename</a></li></ul></li><li class="sidebar-item__anchor" title="Inlining assets"><a class="" href="/guides/asset-modules/#inlining-assets">Inlining assets</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Custom data URI generator"><a class="" href="/guides/asset-modules/#custom-data-uri-generator">Custom data URI generator</a></li></ul></li><li class="sidebar-item__anchor" title="Source assets"><a class="" href="/guides/asset-modules/#source-assets">Source assets</a></li><li class="sidebar-item__anchor" title="URL assets"><a class="" href="/guides/asset-modules/#url-assets">URL assets</a></li><li class="sidebar-item__anchor" title="General asset type"><a class="" href="/guides/asset-modules/#general-asset-type">General asset type</a></li><li class="sidebar-item__anchor" title="Replacing Inline Loader Syntax"><a class="" href="/guides/asset-modules/#replacing-inline-loader-syntax">Replacing Inline Loader Syntax</a></li><li class="sidebar-item__anchor" title="Disable emitting assets"><a class="" href="/guides/asset-modules/#disable-emitting-assets">Disable emitting assets</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="/guides/entry-advanced/">Advanced entry</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Multiple file types per entry"><a class="" href="/guides/entry-advanced/#multiple-file-types-per-entry">Multiple file types per entry</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="/guides/package-exports/">Package exports</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="General syntax"><a class="" href="/guides/package-exports/#general-syntax">General syntax</a></li><li class="sidebar-item__anchor" title="Alternatives"><a class="" href="/guides/package-exports/#alternatives">Alternatives</a></li><li class="sidebar-item__anchor" title="Conditional syntax"><a class="" href="/guides/package-exports/#conditional-syntax">Conditional syntax</a></li><li class="sidebar-item__anchor" title="Abbreviation"><a class="" href="/guides/package-exports/#abbreviation">Abbreviation</a></li><li class="sidebar-item__anchor" title="Notes about ordering"><a class="" href="/guides/package-exports/#notes-about-ordering">Notes about ordering</a></li><li class="sidebar-item__anchor" title="Support"><a class="" href="/guides/package-exports/#support">Support</a></li><li class="sidebar-item__anchor" title="Conditions"><a class="" href="/guides/package-exports/#conditions">Conditions</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Reference syntax"><a class="" href="/guides/package-exports/#reference-syntax">Reference syntax</a></li><li class="sidebar-item__anchor" title="Optimizations"><a class="" href="/guides/package-exports/#optimizations">Optimizations</a></li><li class="sidebar-item__anchor" title="Target environment"><a class="" href="/guides/package-exports/#target-environment">Target environment</a></li><li class="sidebar-item__anchor" title="Conditions: Preprocessor and runtimes"><a class="" href="/guides/package-exports/#conditions-preprocessor-and-runtimes">Conditions: Preprocessor and runtimes</a></li><li class="sidebar-item__anchor" title="Conditions: Custom"><a class="" href="/guides/package-exports/#conditions-custom">Conditions: Custom</a></li></ul></li><li class="sidebar-item__anchor" title="Common patterns"><a class="" href="/guides/package-exports/#common-patterns">Common patterns</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Target environment independent packages"><a class="" href="/guides/package-exports/#target-environment-independent-packages">Target environment independent packages</a></li><li class="sidebar-item__anchor" title="Providing devtools or production optimizations"><a class="" href="/guides/package-exports/#providing-devtools-or-production-optimizations">Providing devtools or production optimizations</a></li><li class="sidebar-item__anchor" title="Providing different versions depending on target environment"><a class="" href="/guides/package-exports/#providing-different-versions-depending-on-target-environment">Providing different versions depending on target environment</a></li><li class="sidebar-item__anchor" title="Combining patterns"><a class="" href="/guides/package-exports/#combining-patterns">Combining patterns</a></li></ul></li><li class="sidebar-item__anchor" title="Guidelines"><a class="" href="/guides/package-exports/#guidelines">Guidelines</a></li></ul></div></div></div></nav><section class="page"><div class="markdown"><h1>Shimming</h1><div id="md-content"><p>The <code>webpack</code> compiler can understand modules written as ES2015 modules, CommonJS or AMD. However, some third party libraries may expect global dependencies (e.g. <code>$</code> for <code>jQuery</code>). The libraries might also create globals which need to be exported. These "broken modules" are one instance where <em>shimming</em> comes into play.</p> <aside class="warning"><h6 class="warning__prefix">warning</h6><p><strong>We don't recommend using globals!</strong> The whole concept behind webpack is to allow more modular front-end development. This means writing isolated modules that are well contained and do not rely on hidden dependencies (e.g. globals). Please use these features only when necessary.</p></aside> <p>Another instance where <em>shimming</em> can be useful is when you want to <a href="https://en.wikipedia.org/wiki/Polyfill_%28programming%29">polyfill</a> browser functionality to support more users. In this case, you may only want to deliver those polyfills to the browsers that need patching (i.e. load them on demand).</p> <p>The following article will walk through both of these use cases.</p> <aside class="tip"><h6 class="tip__prefix">tip</h6><p>For simplicity, this guide stems from the examples in <a href="/guides/getting-started">Getting Started</a>. Please make sure you are familiar with the setup there before moving on.</p></aside> <h2><span id="shimming-globals"></span>Shimming Globals<a href="#shimming-globals" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>Let's start with the first use case of shimming global variables. Before we do anything let's take another look at our project:</p> <p><strong>project</strong></p> <pre><code class="hljs language-diff">webpack-demo |- package.json |- package-lock.json |- webpack.config.js |- /dist <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> |- index.html </span></span>|- /src <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> |- index.js </span></span>|- /node_modules</code></pre> <p>Remember that <code>lodash</code> package we were using? For demonstration purposes, let's say we wanted to instead provide this as a global throughout our application. To do this, we can use <code>ProvidePlugin</code>.</p> <p>The <a href="/plugins/provide-plugin"><code>ProvidePlugin</code></a> makes a package available as a variable in every module compiled through webpack. If webpack sees that variable used, it will include the given package in the final bundle. Let's go ahead by removing the <code>import</code> statement for <code>lodash</code> and instead provide it via the plugin:</p> <p><strong>src/index.js</strong></p> <pre><code class="hljs language-diff"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import _ from 'lodash'; </span><span class="token prefix deleted">-</span><span class="token line"> </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">function component() { </span><span class="token prefix unchanged"> </span><span class="token line"> const element = document.createElement('div'); </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> // Lodash, now imported by this script </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> element.innerHTML = _.join(['Hello', 'webpack'], ' '); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> return element; </span><span class="token prefix unchanged"> </span><span class="token line">} </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">document.body.appendChild(component());</span></span></code></pre> <p><strong>webpack.config.js</strong></p> <pre><code class="hljs language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const path = require('path'); </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">const webpack = require('webpack'); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">module.exports = { </span><span class="token prefix unchanged"> </span><span class="token line"> entry: './src/index.js', </span><span class="token prefix unchanged"> </span><span class="token line"> output: { </span><span class="token prefix unchanged"> </span><span class="token line"> filename: 'main.js', </span><span class="token prefix unchanged"> </span><span class="token line"> path: path.resolve(__dirname, 'dist'), </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> plugins: [ </span><span class="token prefix inserted">+</span><span class="token line"> new webpack.ProvidePlugin({ </span><span class="token prefix inserted">+</span><span class="token line"> _: 'lodash', </span><span class="token prefix inserted">+</span><span class="token line"> }), </span><span class="token prefix inserted">+</span><span class="token line"> ], </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">};</span></span></code></pre> <p>What we've essentially done here is tell webpack...</p> <blockquote> <p>If you encounter at least one instance of the variable <code>_</code>, include the <code>lodash</code> package and provide it to the modules that need it.</p> </blockquote> <p>If we run a build, we should still see the same output:</p> <pre><code class="hljs language-bash">$ <span class="token function">npm</span> run build <span class="token punctuation">..</span> <span class="token punctuation">[</span>webpack-cli<span class="token punctuation">]</span> Compilation finished asset main.js <span class="token number">69.1</span> KiB <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> <span class="token punctuation">[</span>minimized<span class="token punctuation">]</span> <span class="token punctuation">(</span>name: main<span class="token punctuation">)</span> <span class="token number">1</span> related asset runtime modules <span class="token number">344</span> bytes <span class="token number">2</span> modules cacheable modules <span class="token number">530</span> KiB ./src/index.js <span class="token number">191</span> bytes <span class="token punctuation">[</span>built<span class="token punctuation">]</span> <span class="token punctuation">[</span>code generated<span class="token punctuation">]</span> ./node_modules/lodash/lodash.js <span class="token number">530</span> KiB <span class="token punctuation">[</span>built<span class="token punctuation">]</span> <span class="token punctuation">[</span>code generated<span class="token punctuation">]</span> webpack <span class="token number">5.4</span>.0 compiled successfully <span class="token keyword">in</span> <span class="token number">2910</span> ms</code></pre> <p>We can also use the <code>ProvidePlugin</code> to expose a single export of a module by configuring it with an "array path" (e.g. <code>[module, child, ...children?]</code>). So let's imagine we only wanted to provide the <code>join</code> method from <code>lodash</code> wherever it's invoked:</p> <p><strong>src/index.js</strong></p> <pre><code class="hljs language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">function component() { </span><span class="token prefix unchanged"> </span><span class="token line"> const element = document.createElement('div'); </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> element.innerHTML = _.join(['Hello', 'webpack'], ' '); </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> element.innerHTML = join(['Hello', 'webpack'], ' '); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> return element; </span><span class="token prefix unchanged"> </span><span class="token line">} </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">document.body.appendChild(component());</span></span></code></pre> <p><strong>webpack.config.js</strong></p> <pre><code class="hljs language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const path = require('path'); </span><span class="token prefix unchanged"> </span><span class="token line">const webpack = require('webpack'); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">module.exports = { </span><span class="token prefix unchanged"> </span><span class="token line"> entry: './src/index.js', </span><span class="token prefix unchanged"> </span><span class="token line"> output: { </span><span class="token prefix unchanged"> </span><span class="token line"> filename: 'main.js', </span><span class="token prefix unchanged"> </span><span class="token line"> path: path.resolve(__dirname, 'dist'), </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span><span class="token prefix unchanged"> </span><span class="token line"> plugins: [ </span><span class="token prefix unchanged"> </span><span class="token line"> new webpack.ProvidePlugin({ </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> _: 'lodash', </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> join: ['lodash', 'join'], </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> }), </span><span class="token prefix unchanged"> </span><span class="token line"> ], </span><span class="token prefix unchanged"> </span><span class="token line">};</span></span></code></pre> <p>This would go nicely with <a href="/guides/tree-shaking">Tree Shaking</a> as the rest of the <code>lodash</code> library should get dropped.</p> <h2><span id="granular-shimming"></span>Granular Shimming<a href="#granular-shimming" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>Some legacy modules rely on <code>this</code> being the <code>window</code> object. Let's update our <code>index.js</code> so this is the case:</p> <pre><code class="hljs language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">function component() { </span><span class="token prefix unchanged"> </span><span class="token line"> const element = document.createElement('div'); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> element.innerHTML = join(['Hello', 'webpack'], ' '); </span></span> <span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> // Assume we are in the context of `window` </span><span class="token prefix inserted">+</span><span class="token line"> this.alert("Hmmm, this probably isn't a great idea..."); </span><span class="token prefix inserted">+</span><span class="token line"> </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> return element; </span><span class="token prefix unchanged"> </span><span class="token line">} </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">document.body.appendChild(component());</span></span></code></pre> <p>This becomes a problem when the module is executed in a CommonJS context where <code>this</code> is equal to <code>module.exports</code>. In this case you can override <code>this</code> using the <a href="/loaders/imports-loader/"><code>imports-loader</code></a>:</p> <p><strong>webpack.config.js</strong></p> <pre><code class="hljs language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const path = require('path'); </span><span class="token prefix unchanged"> </span><span class="token line">const webpack = require('webpack'); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">module.exports = { </span><span class="token prefix unchanged"> </span><span class="token line"> entry: './src/index.js', </span><span class="token prefix unchanged"> </span><span class="token line"> output: { </span><span class="token prefix unchanged"> </span><span class="token line"> filename: 'main.js', </span><span class="token prefix unchanged"> </span><span class="token line"> path: path.resolve(__dirname, 'dist'), </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> module: { </span><span class="token prefix inserted">+</span><span class="token line"> rules: [ </span><span class="token prefix inserted">+</span><span class="token line"> { </span><span class="token prefix inserted">+</span><span class="token line"> test: require.resolve('./src/index.js'), </span><span class="token prefix inserted">+</span><span class="token line"> use: 'imports-loader?wrapper=window', </span><span class="token prefix inserted">+</span><span class="token line"> }, </span><span class="token prefix inserted">+</span><span class="token line"> ], </span><span class="token prefix inserted">+</span><span class="token line"> }, </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> plugins: [ </span><span class="token prefix unchanged"> </span><span class="token line"> new webpack.ProvidePlugin({ </span><span class="token prefix unchanged"> </span><span class="token line"> join: ['lodash', 'join'], </span><span class="token prefix unchanged"> </span><span class="token line"> }), </span><span class="token prefix unchanged"> </span><span class="token line"> ], </span><span class="token prefix unchanged"> </span><span class="token line">};</span></span></code></pre> <h2><span id="global-exports"></span>Global Exports<a href="#global-exports" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>Let's say a library creates a global variable that it expects its consumers to use. We can add a small module to our setup to demonstrate this:</p> <p><strong>project</strong></p> <pre><code class="hljs language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> webpack-demo </span><span class="token prefix unchanged"> </span><span class="token line"> |- package.json </span><span class="token prefix unchanged"> </span><span class="token line"> |- package-lock.json </span><span class="token prefix unchanged"> </span><span class="token line"> |- webpack.config.js </span><span class="token prefix unchanged"> </span><span class="token line"> |- /dist </span><span class="token prefix unchanged"> </span><span class="token line"> |- /src </span><span class="token prefix unchanged"> </span><span class="token line"> |- index.js </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> |- globals.js </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> |- /node_modules</span></span></code></pre> <p><strong>src/globals.js</strong></p> <pre><code class="hljs language-js"><span class="token keyword">const</span> file <span class="token operator">=</span> <span class="token string">'blah.txt'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> helpers <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function-variable function">test</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'test something'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">parse</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'parse something'</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>Now, while you'd likely never do this in your own source code, you may encounter a dated library you'd like to use that contains similar code to what's shown above. In this case, we can use <a href="/loaders/exports-loader/"><code>exports-loader</code></a>, to export that global variable as a normal module export. For instance, in order to export <code>file</code> as <code>file</code> and <code>helpers.parse</code> as <code>parse</code>:</p> <p><strong>webpack.config.js</strong></p> <pre><code class="hljs language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const path = require('path'); </span><span class="token prefix unchanged"> </span><span class="token line">const webpack = require('webpack'); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">module.exports = { </span><span class="token prefix unchanged"> </span><span class="token line"> entry: './src/index.js', </span><span class="token prefix unchanged"> </span><span class="token line"> output: { </span><span class="token prefix unchanged"> </span><span class="token line"> filename: 'main.js', </span><span class="token prefix unchanged"> </span><span class="token line"> path: path.resolve(__dirname, 'dist'), </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span><span class="token prefix unchanged"> </span><span class="token line"> module: { </span><span class="token prefix unchanged"> </span><span class="token line"> rules: [ </span><span class="token prefix unchanged"> </span><span class="token line"> { </span><span class="token prefix unchanged"> </span><span class="token line"> test: require.resolve('./src/index.js'), </span><span class="token prefix unchanged"> </span><span class="token line"> use: 'imports-loader?wrapper=window', </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> { </span><span class="token prefix inserted">+</span><span class="token line"> test: require.resolve('./src/globals.js'), </span><span class="token prefix inserted">+</span><span class="token line"> use: </span><span class="token prefix inserted">+</span><span class="token line"> 'exports-loader?type=commonjs&exports=file,multiple|helpers.parse|parse', </span><span class="token prefix inserted">+</span><span class="token line"> }, </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> ], </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span><span class="token prefix unchanged"> </span><span class="token line"> plugins: [ </span><span class="token prefix unchanged"> </span><span class="token line"> new webpack.ProvidePlugin({ </span><span class="token prefix unchanged"> </span><span class="token line"> join: ['lodash', 'join'], </span><span class="token prefix unchanged"> </span><span class="token line"> }), </span><span class="token prefix unchanged"> </span><span class="token line"> ], </span><span class="token prefix unchanged"> </span><span class="token line">};</span></span></code></pre> <p>Now from within our entry script (i.e. <code>src/index.js</code>), we could use <code>const { file, parse } = require('./globals.js');</code> and all should work smoothly.</p> <h2><span id="loading-polyfills"></span>Loading Polyfills<a href="#loading-polyfills" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>Almost everything we've discussed thus far has been in relation to handling legacy packages. Let's move on to our second topic: <strong>polyfills</strong>.</p> <p>There's a lot of ways to load polyfills. For example, to include the <a href="https://babeljs.io/docs/en/babel-polyfill/"><code>babel-polyfill</code></a> we might:</p> <pre><code class="hljs language-bash"><span class="token function">npm</span> <span class="token function">install</span> --save babel-polyfill</code></pre> <p>and <code>import</code> it so as to include it in our main bundle:</p> <p><strong>src/index.js</strong></p> <pre><code class="hljs language-diff"><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import 'babel-polyfill'; </span><span class="token prefix inserted">+</span><span class="token line"> </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">function component() { </span><span class="token prefix unchanged"> </span><span class="token line"> const element = document.createElement('div'); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> element.innerHTML = join(['Hello', 'webpack'], ' '); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> // Assume we are in the context of `window` </span><span class="token prefix unchanged"> </span><span class="token line"> this.alert("Hmmm, this probably isn't a great idea..."); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> return element; </span><span class="token prefix unchanged"> </span><span class="token line">} </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">document.body.appendChild(component());</span></span></code></pre> <aside class="tip"><h6 class="tip__prefix">tip</h6><p>Note that we aren't binding the <code>import</code> to a variable. This is because polyfills run on their own, prior to the rest of the code base, allowing us to then assume certain native functionality exists.</p></aside> <p>Note that this approach prioritizes correctness over bundle size. To be safe and robust, polyfills/shims must run <strong>before all other code</strong>, and thus either need to load synchronously, or, all app code needs to load after all polyfills/shims load. There are many misconceptions in the community, as well, that modern browsers "don't need" polyfills, or that polyfills/shims merely serve to add missing features - in fact, they often <em>repair broken implementations</em>, even in the most modern of browsers. The best practice thus remains to unconditionally and synchronously load all polyfills/shims, despite the bundle size cost this incurs.</p> <p>If you feel that you have mitigated these concerns and wish to incur the risk of brokenness, here's one way you might do it: Let's move our <code>import</code> to a new file and add the <a href="https://github.com/github/fetch"><code>whatwg-fetch</code></a> polyfill:</p> <pre><code class="hljs language-bash"><span class="token function">npm</span> <span class="token function">install</span> --save whatwg-fetch</code></pre> <p><strong>src/index.js</strong></p> <pre><code class="hljs language-diff"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import 'babel-polyfill'; </span><span class="token prefix deleted">-</span><span class="token line"> </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">function component() { </span><span class="token prefix unchanged"> </span><span class="token line"> const element = document.createElement('div'); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> element.innerHTML = join(['Hello', 'webpack'], ' '); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> // Assume we are in the context of `window` </span><span class="token prefix unchanged"> </span><span class="token line"> this.alert("Hmmm, this probably isn't a great idea..."); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> return element; </span><span class="token prefix unchanged"> </span><span class="token line">} </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">document.body.appendChild(component());</span></span></code></pre> <p><strong>project</strong></p> <pre><code class="hljs language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> webpack-demo </span><span class="token prefix unchanged"> </span><span class="token line"> |- package.json </span><span class="token prefix unchanged"> </span><span class="token line"> |- package-lock.json </span><span class="token prefix unchanged"> </span><span class="token line"> |- webpack.config.js </span><span class="token prefix unchanged"> </span><span class="token line"> |- /dist </span><span class="token prefix unchanged"> </span><span class="token line"> |- /src </span><span class="token prefix unchanged"> </span><span class="token line"> |- index.js </span><span class="token prefix unchanged"> </span><span class="token line"> |- globals.js </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> |- polyfills.js </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> |- /node_modules</span></span></code></pre> <p><strong>src/polyfills.js</strong></p> <pre><code class="hljs language-javascript"><span class="token keyword">import</span> <span class="token string">'babel-polyfill'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'whatwg-fetch'</span><span class="token punctuation">;</span></code></pre> <p><strong>webpack.config.js</strong></p> <pre><code class="hljs language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const path = require('path'); </span><span class="token prefix unchanged"> </span><span class="token line">const webpack = require('webpack'); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">module.exports = { </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> entry: './src/index.js', </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> entry: { </span><span class="token prefix inserted">+</span><span class="token line"> polyfills: './src/polyfills', </span><span class="token prefix inserted">+</span><span class="token line"> index: './src/index.js', </span><span class="token prefix inserted">+</span><span class="token line"> }, </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> output: { </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> filename: 'main.js', </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> filename: '[name].bundle.js', </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> path: path.resolve(__dirname, 'dist'), </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span><span class="token prefix unchanged"> </span><span class="token line"> module: { </span><span class="token prefix unchanged"> </span><span class="token line"> rules: [ </span><span class="token prefix unchanged"> </span><span class="token line"> { </span><span class="token prefix unchanged"> </span><span class="token line"> test: require.resolve('./src/index.js'), </span><span class="token prefix unchanged"> </span><span class="token line"> use: 'imports-loader?wrapper=window', </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span><span class="token prefix unchanged"> </span><span class="token line"> { </span><span class="token prefix unchanged"> </span><span class="token line"> test: require.resolve('./src/globals.js'), </span><span class="token prefix unchanged"> </span><span class="token line"> use: </span><span class="token prefix unchanged"> </span><span class="token line"> 'exports-loader?type=commonjs&exports[]=file&exports[]=multiple|helpers.parse|parse', </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span><span class="token prefix unchanged"> </span><span class="token line"> ], </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span><span class="token prefix unchanged"> </span><span class="token line"> plugins: [ </span><span class="token prefix unchanged"> </span><span class="token line"> new webpack.ProvidePlugin({ </span><span class="token prefix unchanged"> </span><span class="token line"> join: ['lodash', 'join'], </span><span class="token prefix unchanged"> </span><span class="token line"> }), </span><span class="token prefix unchanged"> </span><span class="token line"> ], </span><span class="token prefix unchanged"> </span><span class="token line">};</span></span></code></pre> <p>With that in place, we can add the logic to conditionally load our new <code>polyfills.bundle.js</code> file. How you make this decision depends on the technologies and browsers you need to support. We'll do some testing to determine whether our polyfills are needed:</p> <p><strong>dist/index.html</strong></p> <pre><code class="hljs language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"><!DOCTYPE html> </span><span class="token prefix unchanged"> </span><span class="token line"><html> </span><span class="token prefix unchanged"> </span><span class="token line"> <head> </span><span class="token prefix unchanged"> </span><span class="token line"> <meta charset="utf-8" /> </span><span class="token prefix unchanged"> </span><span class="token line"> <title>Getting Started</title> </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> <script> </span><span class="token prefix inserted">+</span><span class="token line"> const modernBrowser = 'fetch' in window && 'assign' in Object; </span><span class="token prefix inserted">+</span><span class="token line"> </span><span class="token prefix inserted">+</span><span class="token line"> if (!modernBrowser) { </span><span class="token prefix inserted">+</span><span class="token line"> const scriptElement = document.createElement('script'); </span><span class="token prefix inserted">+</span><span class="token line"> </span><span class="token prefix inserted">+</span><span class="token line"> scriptElement.async = false; </span><span class="token prefix inserted">+</span><span class="token line"> scriptElement.src = '/polyfills.bundle.js'; </span><span class="token prefix inserted">+</span><span class="token line"> document.head.appendChild(scriptElement); </span><span class="token prefix inserted">+</span><span class="token line"> } </span><span class="token prefix inserted">+</span><span class="token line"> </script> </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> </head> </span><span class="token prefix unchanged"> </span><span class="token line"> <body> </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> <script src="main.js"></script> </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> <script src="index.bundle.js"></script> </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> </body> </span><span class="token prefix unchanged"> </span><span class="token line"></html></span></span></code></pre> <p>Now we can <code>fetch</code> some data within our entry script:</p> <p><strong>src/index.js</strong></p> <pre><code class="hljs language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">function component() { </span><span class="token prefix unchanged"> </span><span class="token line"> const element = document.createElement('div'); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> element.innerHTML = join(['Hello', 'webpack'], ' '); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> // Assume we are in the context of `window` </span><span class="token prefix unchanged"> </span><span class="token line"> this.alert("Hmmm, this probably isn't a great idea..."); </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> return element; </span><span class="token prefix unchanged"> </span><span class="token line">} </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">document.body.appendChild(component()); </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> </span><span class="token prefix inserted">+</span><span class="token line">fetch('https://jsonplaceholder.typicode.com/users') </span><span class="token prefix inserted">+</span><span class="token line"> .then((response) => response.json()) </span><span class="token prefix inserted">+</span><span class="token line"> .then((json) => { </span><span class="token prefix inserted">+</span><span class="token line"> console.log( </span><span class="token prefix inserted">+</span><span class="token line"> "We retrieved some data! AND we're confident it will work on a variety of browser distributions." </span><span class="token prefix inserted">+</span><span class="token line"> ); </span><span class="token prefix inserted">+</span><span class="token line"> console.log(json); </span><span class="token prefix inserted">+</span><span class="token line"> }) </span><span class="token prefix inserted">+</span><span class="token line"> .catch((error) => </span><span class="token prefix inserted">+</span><span class="token line"> console.error('Something went wrong when fetching this data: ', error) </span><span class="token prefix inserted">+</span><span class="token line"> );</span></span></code></pre> <p>If we run our build, another <code>polyfills.bundle.js</code> file will be emitted and everything should still run smoothly in the browser. Note that this set up could likely be improved upon but it should give you a good idea of how you can provide polyfills only to the users that actually need them.</p> <h2><span id="further-optimizations"></span>Further Optimizations<a href="#further-optimizations" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>The <code>babel-preset-env</code> package uses <a href="https://github.com/browserslist/browserslist">browserslist</a> to transpile only what is not supported in your browsers matrix. This preset comes with the <a href="https://babeljs.io/docs/en/babel-preset-env#usebuiltins"><code>useBuiltIns</code></a> option, <code>false</code> by default, which converts your global <code>babel-polyfill</code> import to a more granular feature by feature <code>import</code> pattern:</p> <pre><code class="hljs language-js"><span class="token keyword">import</span> <span class="token string">'core-js/modules/es7.string.pad-start'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'core-js/modules/es7.string.pad-end'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'core-js/modules/web.timers'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'core-js/modules/web.immediate'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'core-js/modules/web.dom.iterable'</span><span class="token punctuation">;</span></code></pre> <p>See <a href="https://babeljs.io/docs/en/babel-preset-env">the babel-preset-env documentation</a> for more information.</p> <h2><span id="node-built-ins"></span>Node Built-Ins<a href="#node-built-ins" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>Node built-ins, like <code>process</code>, can be polyfilled right directly from your configuration file without the use of any special loaders or plugins. See the <a href="/configuration/node">node configuration page</a> for more information and examples.</p> <h2><span id="other-utilities"></span>Other Utilities<a href="#other-utilities" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2> <p>There are a few other tools that can help when dealing with legacy modules.</p> <p>When there is no AMD/CommonJS version of the module and you want to include the <code>dist</code>, you can flag this module in <a href="/configuration/module/#modulenoparse"><code>noParse</code></a>. This will cause webpack to include the module without parsing it or resolving <code>require()</code> and <code>import</code> statements. This practice is also used to improve the build performance.</p> <aside class="warning"><h6 class="warning__prefix">warning</h6><p>Any feature requiring the AST, like the <code>ProvidePlugin</code>, will not work.</p></aside> <p>Lastly, there are some modules that support multiple <a href="/concepts/modules">module styles</a>; e.g. a combination of AMD, CommonJS, and legacy. In most of these cases, they first check for <code>define</code> and then use some quirky code to export properties. In these cases, it could help to force the CommonJS path by setting <code>additionalCode=var%20define%20=%20false;</code> via the <a href="/loaders/imports-loader/"><code>imports-loader</code></a>.</p></div><div class="print:hidden"><h2>Further Reading</h2><ul><li><a href="https://medium.com/hackernoon/10-things-i-learned-making-the-fastest-site-in-the-world-18a0e1cdf4a7" target="_blank" rel="noopener noreferrer">Reward modern browser users script</a></li><li><a href="https://babeljs.io/docs/en/babel-preset-env#usebuiltins" target="_blank" rel="noopener noreferrer">useBuiltIns in babel-preset-env</a></li></ul></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/guides/shimming.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__prev"><div>« Previous</div><a class="adjacent-links__link" href="/guides/ecma-script-modules/">ECMAScript Modules</a></div><div class="adjacent-links__next"><div class="adjacent-links__label--next">Next »</div><a class="adjacent-links__link" href="/guides/typescript/">TypeScript</a></div></div><div data-testid="contributors" class="print:hidden"><h2 class="!font-sans !font-normal">14<!-- --> <!-- -->Contributors</h2><div><div class="grid gap-[10px] lg:gap-[15px] grid-cols-contributors"><a href="https://github.com/pksjce"><img width="45" height="45" alt="pksjce" title="pksjce" 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/simon04"><img width="45" height="45" alt="simon04" title="simon04" 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/svyandun"><img width="45" height="45" alt="svyandun" title="svyandun" 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/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/AnayaDesign"><img width="45" height="45" alt="AnayaDesign" title="AnayaDesign" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/dhurlburtusa"><img width="45" height="45" alt="dhurlburtusa" title="dhurlburtusa" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/plr108"><img width="45" height="45" alt="plr108" title="plr108" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/NicolasLetellier"><img width="45" height="45" alt="NicolasLetellier" title="NicolasLetellier" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/wizardofhogwarts"><img width="45" height="45" alt="wizardofhogwarts" title="wizardofhogwarts" class="w-full rounded-full shadow" src="/icon-square-small-slack.1c7f4f7a52c41f94.png"/></a><a href="https://github.com/snitin315"><img width="45" height="45" alt="snitin315" title="snitin315" 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></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.65e88f7053268cc3.js"></script></body>