-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
37 lines (37 loc) · 40.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html><html lang="en" data-reactroot=""><head><meta charset="utf-8"/><meta name="theme-color" content="#2B3A42"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Loaders | webpack</title><meta 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 property="og:site_name" content="webpack"/><meta property="og:type" content="website"/><meta property="og:title" content="Loaders | webpack"/><meta 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 property="og:image" content="/aad9d51e01a0dcc2caf5bee43dc8e647.svg"/><meta property="twitter:card" content="summary"/><meta property="twitter:site" content="@webpack"/><meta property="twitter:creator" content="@webpack"/><meta property="twitter:domain" content="https://webpack.js.org/"/><link rel="icon" type="image/x-icon" href="/bc3effb418df77da9e04825c48a58a49.ico"/><link rel="stylesheet" href="/c3bdf2a06d9967301c16.css"/><link rel="stylesheet" href="/00b4b8424f4141301d82.css"/><link rel="manifest" href="/manifest.json"/><link rel="canonical" href="https://webpack.js.org/concepts/loaders/"/><meta name="mobile-web-app-capable" content="yes"/><link rel="icon" sizes="192x192" href="/icon_192x192.png"/><link rel="icon" sizes="512x512" href="/icon_512x512.png"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><meta name="apple-mobile-web-app-title" content="webpack"/><link rel="apple-touch-icon-precomposed" href="/icon_180x180.png"/><link rel="mask-icon" href="/aad9d51e01a0dcc2caf5bee43dc8e647.svg" color="#465e69"/><meta name="msapplication-TileImage" content="/icon_150x150.png"/><meta name="msapplication-TileColor" content="#465e69"/></head><body><div id="root"><div class="site"><div class="site__header"><div class="notification-bar"><div class="container notification-bar__inner"><p>Sponsor webpack and get apparel from the <a href="https://webpack.threadless.com">official shop</a>! All proceeds go to our <a href="https://opencollective.com/webpack">open collective</a>!</p></div></div><header class="navigation "><section class="navigation__inner"><button aria-label="Open menu" class="navigation__mobile"><svg viewBox="-62 138 25 25"><g><g><path d="M-60.2,140.2h20.9c1,0,1.8,0.8,1.8,1.8l0,0c0,1-0.8,1.8-1.8,1.8h-20.9c-1,0-1.8-0.8-1.8-1.8l0,0 C-62,141-61.2,140.2-60.2,140.2z"></path><path d="M-60.2,148.7h20.9c1,0,1.8,0.8,1.8,1.8l0,0c0,1-0.8,1.8-1.8,1.8h-20.9c-1,0-1.8-0.8-1.8-1.8l0,0 C-62,149.5-61.2,148.7-60.2,148.7z"></path><path d="M-60.2,157.2h20.9c1,0,1.8,0.8,1.8,1.8l0,0c0,1-0.8,1.8-1.8,1.8h-20.9c-1,0-1.8-0.8-1.8-1.8l0,0 C-62,158-61.2,157.2-60.2,157.2z"></path></g></g></svg></button><a class="navigation__logo" href="/"><img class="logo" src="/e0b5805d423a4ec9473ee315250968b2.svg" alt="webpack logo"/></a><nav class="navigation__items"><a class="navigation__item navigation__item--active" href="/concepts/">Documentation</a><a class="navigation__item " href="/contribute/">Contribute</a><a class="navigation__item " href="/vote/">Vote</a><a href="https://medium.com/webpack" target="_blank" rel="noopener" class="navigation__item ">Blog</a><a href="https://github.com/webpack/webpack" target="_blank" rel="noopener" title="GitHub Repository" class="navigation__item navigation__item--icon "><i aria-hidden="true" class="icon-github"></i></a><a href="https://twitter.com/webpack" target="_blank" rel="noopener" title="webpack on Twitter" class="navigation__item navigation__item--icon "><i aria-hidden="true" class="icon-twitter"></i></a><a href="https://stackoverflow.com/questions/tagged/webpack" target="_blank" rel="noopener" title="webpack on Stack Overflow" class="navigation__item navigation__item--icon "><i aria-hidden="true" class="icon-stack-overflow"></i></a><span class="navigation__item navigation__item--icon"><nav class="dropdown navigation__languages"><button aria-haspopup="true" aria-expanded="false" aria-label="Select language"><img class="dropdown__language" alt="select language" src="/57c717e75066b659cfe19dc2a643153c.svg"/><i aria-hidden="true" class="dropdown__arrow"></i></button><div class="dropdown__list "><ul><li><a href="https://webpack.js.org/"><span>English</span></a></li><li><a href="https://webpack.docschina.org/"><span lang="zh">中文</span></a></li></ul></div></nav></span></nav><div class="navigation-search "><input type="text" class="navigation-search__input" placeholder="Search this site..." value=""/><button aria-label="Hide search box" class="navigation-search__icon navigation-search__clear"><svg viewBox="-137 138 25 25"><g transform="translate(0,-952.36218)"><path d="M-131.3,1094.4c-0.4,0-0.9,0.1-1.2,0.5c-0.7,0.7-0.7,1.7,0,2.4l5.6,5.6l-5.6,5.6c-0.7,0.7-0.7,1.7,0,2.4 c0.7,0.7,1.7,0.7,2.4,0l5.6-5.6l5.6,5.6c0.7,0.7,1.7,0.7,2.4,0c0.7-0.7,0.7-1.7,0-2.4l-5.6-5.6l5.6-5.6c0.7-0.7,0.7-1.7,0-2.4 c-0.7-0.7-1.7-0.7-2.4,0l-5.6,5.6l-5.6-5.6C-130.5,1094.5-130.9,1094.4-131.3,1094.4L-131.3,1094.4z"></path></g></svg></button><button aria-label="Show search box" class="navigation-search__icon navigation-search__search"><svg viewBox="-137 138 25 25"><g><path d="M-114.6,162.6l-7.5-7.5c-0.6-0.6-0.6-1.6,0-2.1l0,0c0.6-0.6,1.6-0.6,2.1,0l7.5,7.5c0.6,0.6,0.6,1.6,0,2.1l0,0 C-113,163.1-114,163.1-114.6,162.6z"></path><path d="M-134.1,140.9c-3.9,3.9-3.9,10.2,0,14.1s10.2,3.9,14.1,0s3.9-10.2,0-14.1S-130.2,137-134.1,140.9z M-122.1,153 c-2.7,2.7-7.1,2.7-9.8,0s-2.7-7.1,0-9.8s7.1-2.7,9.8,0C-119.4,145.9-119.4,150.2-122.1,153z"></path></g></svg></button></div></section><div class="navigation-sub"><div class="navigation-sub__inner"><a class="navigation-sub__link " title="api" content="api" href="/api/">api</a><a class="navigation-sub__link " title="blog" content="blog" href="/blog/">blog</a><a class="navigation-sub__link navigation-sub__link--active" title="concepts" content="concepts" href="/concepts/">concepts</a><a class="navigation-sub__link " title="configuration" content="configuration" href="/configuration/">configuration</a><a class="navigation-sub__link " title="guides" content="guides" href="/guides/">guides</a><a class="navigation-sub__link " title="loaders" content="loaders" href="/loaders/">loaders</a><a class="navigation-sub__link " title="migrate" content="migrate" href="/migrate/">migrate</a><a class="navigation-sub__link " title="plugins" content="plugins" href="/plugins/">plugins</a></div></div></header></div><div class="container site__content"><div class="sponsors"><a href="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship" target="_blank" rel="noopener" class="sponsors__content"><img src="/bf176a25b4f8227fea804854c98dc5e2.png"/><img src="/d19378a95ebe6b15d5ddea281138dcf4.svg" style="width:100px"/><div style="margin-top:1em;font-size:2em;text-align:center;color:#535353">ag-grid is proud to partner with webpack</div></a></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 value="5">Webpack 5</option><option selected="" value="4">Webpack 4</option></select><img src="/33e97d95c634809004ee2830b6297e89.svg" class="absolute right-5 top-5 fill-current text-gray-300 z-[-1]" width="20" height="20"/></div><div class="sidebar-item sidebar-item--disabled`"><i class="sidebar-item__toggle icon-vertical-bar"></i><a class="sidebar-item__title sidebar-link__print" href="/concepts/printable/" rel="nofollow" alt="Print" title="Print" target="_blank">Print Section<img src="/96ccbfac58b65e83657a220603e00abe.svg"/></a></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/">Concepts</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Entry"><a href="/concepts/#entry">Entry</a></li><li class="sidebar-item__anchor" title="Output"><a href="/concepts/#output">Output</a></li><li class="sidebar-item__anchor" title="Loaders"><a href="/concepts/#loaders">Loaders</a></li><li class="sidebar-item__anchor" title="Plugins"><a href="/concepts/#plugins">Plugins</a></li><li class="sidebar-item__anchor" title="Mode"><a href="/concepts/#mode">Mode</a></li><li class="sidebar-item__anchor" title="Browser Compatibility"><a href="/concepts/#browser-compatibility">Browser Compatibility</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/entry-points/">Entry Points</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Single Entry (Shorthand) Syntax"><a href="/concepts/entry-points/#single-entry-shorthand-syntax">Single Entry (Shorthand) Syntax</a></li><li class="sidebar-item__anchor" title="Object Syntax"><a href="/concepts/entry-points/#object-syntax">Object Syntax</a></li><li class="sidebar-item__anchor" title="Scenarios"><a href="/concepts/entry-points/#scenarios">Scenarios</a></li><li class="sidebar-item__anchor" title="Separate App and Vendor Entries"><a href="/concepts/entry-points/#separate-app-and-vendor-entries">Separate App and Vendor Entries</a></li><li class="sidebar-item__anchor" title="Multi Page Application"><a href="/concepts/entry-points/#multi-page-application">Multi Page Application</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/output/">Output</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Usage"><a href="/concepts/output/#usage">Usage</a></li><li class="sidebar-item__anchor" title="Multiple Entry Points"><a href="/concepts/output/#multiple-entry-points">Multiple Entry Points</a></li><li class="sidebar-item__anchor" title="Advanced"><a href="/concepts/output/#advanced">Advanced</a></li></ul></div></div><div><div class="sidebar-item sidebar-item--open "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/loaders/">Loaders</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Example"><a href="/concepts/loaders/#example">Example</a></li><li class="sidebar-item__anchor" title="Using Loaders"><a href="/concepts/loaders/#using-loaders">Using Loaders</a></li><li class="sidebar-item__anchor" title="Configuration"><a href="/concepts/loaders/#configuration">Configuration</a></li><li class="sidebar-item__anchor" title="Inline"><a href="/concepts/loaders/#inline">Inline</a></li><li class="sidebar-item__anchor" title="CLI"><a href="/concepts/loaders/#cli">CLI</a></li><li class="sidebar-item__anchor" title="Loader Features"><a href="/concepts/loaders/#loader-features">Loader Features</a></li><li class="sidebar-item__anchor" title="Resolving Loaders"><a href="/concepts/loaders/#resolving-loaders">Resolving Loaders</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/plugins/">Plugins</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Anatomy"><a href="/concepts/plugins/#anatomy">Anatomy</a></li><li class="sidebar-item__anchor" title="Usage"><a href="/concepts/plugins/#usage">Usage</a></li><li class="sidebar-item__anchor" title="Configuration"><a href="/concepts/plugins/#configuration">Configuration</a></li><li class="sidebar-item__anchor" title="Node API"><a href="/concepts/plugins/#node-api">Node API</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/configuration/">Configuration</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Simple Configuration"><a href="/concepts/configuration/#simple-configuration">Simple Configuration</a></li><li class="sidebar-item__anchor" title="Multiple Targets"><a href="/concepts/configuration/#multiple-targets">Multiple Targets</a></li><li class="sidebar-item__anchor" title="Using other Configuration Languages"><a href="/concepts/configuration/#using-other-configuration-languages">Using other Configuration Languages</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/modules/">Modules</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="What is a webpack Module"><a href="/concepts/modules/#what-is-a-webpack-module">What is a webpack Module</a></li><li class="sidebar-item__anchor" title="Supported Module Types"><a href="/concepts/modules/#supported-module-types">Supported Module Types</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/module-resolution/">Module Resolution</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Resolving rules in webpack"><a href="/concepts/module-resolution/#resolving-rules-in-webpack">Resolving rules in webpack</a></li><li class="sidebar-item__anchor" title="Absolute paths"><a href="/concepts/module-resolution/#absolute-paths">Absolute paths</a></li><li class="sidebar-item__anchor" title="Relative paths"><a href="/concepts/module-resolution/#relative-paths">Relative paths</a></li><li class="sidebar-item__anchor" title="Module paths"><a href="/concepts/module-resolution/#module-paths">Module paths</a></li><li class="sidebar-item__anchor" title="Resolving Loaders"><a href="/concepts/module-resolution/#resolving-loaders">Resolving Loaders</a></li><li class="sidebar-item__anchor" title="Caching"><a href="/concepts/module-resolution/#caching">Caching</a></li></ul></div></div><div><div class="sidebar-item sidebar-item--disabled"><i class="sidebar-item__toggle icon-vertical-bar"></i><a class="sidebar-item__title" href="/concepts/dependency-graph/">Dependency Graph</a></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/targets/">Targets</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Usage"><a href="/concepts/targets/#usage">Usage</a></li><li class="sidebar-item__anchor" title="Multiple Targets"><a href="/concepts/targets/#multiple-targets">Multiple Targets</a></li><li class="sidebar-item__anchor" title="Resources"><a href="/concepts/targets/#resources">Resources</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/manifest/">The Manifest</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Runtime"><a href="/concepts/manifest/#runtime">Runtime</a></li><li class="sidebar-item__anchor" title="Manifest"><a href="/concepts/manifest/#manifest">Manifest</a></li><li class="sidebar-item__anchor" title="The Problem"><a href="/concepts/manifest/#the-problem">The Problem</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/hot-module-replacement/">Hot Module Replacement</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="How It Works"><a href="/concepts/hot-module-replacement/#how-it-works">How It Works</a></li><li class="sidebar-item__anchor" title="In the Application"><a href="/concepts/hot-module-replacement/#in-the-application">In the Application</a></li><li class="sidebar-item__anchor" title="In the Compiler"><a href="/concepts/hot-module-replacement/#in-the-compiler">In the Compiler</a></li><li class="sidebar-item__anchor" title="In a Module"><a href="/concepts/hot-module-replacement/#in-a-module">In a Module</a></li><li class="sidebar-item__anchor" title="In the Runtime"><a href="/concepts/hot-module-replacement/#in-the-runtime">In the Runtime</a></li><li class="sidebar-item__anchor" title="Get Started"><a href="/concepts/hot-module-replacement/#get-started">Get Started</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/why-webpack/">Why webpack</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="IIFE's - Immediately invoked function expressions"><a href="/concepts/why-webpack/#iifes---immediately-invoked-function-expressions">IIFE's - Immediately invoked function expressions</a></li><li class="sidebar-item__anchor" title="Birth of JavaScript Modules happened thanks to Node.js"><a href="/concepts/why-webpack/#birth-of-javascript-modules-happened-thanks-to-nodejs">Birth of JavaScript Modules happened thanks to Node.js</a></li><li class="sidebar-item__anchor" title="npm + Node.js + modules -- mass distribution"><a href="/concepts/why-webpack/#npm--nodejs--modules----mass-distribution">npm + Node.js + modules -- mass distribution</a></li><li class="sidebar-item__anchor" title="ESM - ECMAScript Modules"><a href="/concepts/why-webpack/#esm---ecmascript-modules">ESM - ECMAScript Modules</a></li><li class="sidebar-item__anchor" title="Wouldn't it be nice…"><a href="/concepts/why-webpack/#wouldnt-it-be-nice">Wouldn't it be nice…</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/printable/">Printable</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Concepts"><a href="/concepts/printable/#concepts">Concepts</a></li><li class="sidebar-item__anchor" title="Entry"><a href="/concepts/printable/#entry">Entry</a></li><li class="sidebar-item__anchor" title="Output"><a href="/concepts/printable/#output">Output</a></li><li class="sidebar-item__anchor" title="Loaders"><a href="/concepts/printable/#loaders">Loaders</a></li><li class="sidebar-item__anchor" title="Plugins"><a href="/concepts/printable/#plugins">Plugins</a></li><li class="sidebar-item__anchor" title="Mode"><a href="/concepts/printable/#mode">Mode</a></li><li class="sidebar-item__anchor" title="Browser Compatibility"><a href="/concepts/printable/#browser-compatibility">Browser Compatibility</a></li><li class="sidebar-item__anchor" title="Entry Points"><a href="/concepts/printable/#entry-points">Entry Points</a></li><li class="sidebar-item__anchor" title="Single Entry (Shorthand) Syntax"><a href="/concepts/printable/#single-entry-shorthand-syntax">Single Entry (Shorthand) Syntax</a></li><li class="sidebar-item__anchor" title="Object Syntax"><a href="/concepts/printable/#object-syntax">Object Syntax</a></li><li class="sidebar-item__anchor" title="Scenarios"><a href="/concepts/printable/#scenarios">Scenarios</a></li><li class="sidebar-item__anchor" title="Separate App and Vendor Entries"><a href="/concepts/printable/#separate-app-and-vendor-entries">Separate App and Vendor Entries</a></li><li class="sidebar-item__anchor" title="Multi Page Application"><a href="/concepts/printable/#multi-page-application">Multi Page Application</a></li><li class="sidebar-item__anchor" title="Output"><a href="/concepts/printable/#output-1">Output</a></li><li class="sidebar-item__anchor" title="Usage"><a href="/concepts/printable/#usage">Usage</a></li><li class="sidebar-item__anchor" title="Multiple Entry Points"><a href="/concepts/printable/#multiple-entry-points">Multiple Entry Points</a></li><li class="sidebar-item__anchor" title="Advanced"><a href="/concepts/printable/#advanced">Advanced</a></li><li class="sidebar-item__anchor" title="Loaders"><a href="/concepts/printable/#loaders-1">Loaders</a></li><li class="sidebar-item__anchor" title="Example"><a href="/concepts/printable/#example">Example</a></li><li class="sidebar-item__anchor" title="Using Loaders"><a href="/concepts/printable/#using-loaders">Using Loaders</a></li><li class="sidebar-item__anchor" title="Configuration"><a href="/concepts/printable/#configuration">Configuration</a></li><li class="sidebar-item__anchor" title="Inline"><a href="/concepts/printable/#inline">Inline</a></li><li class="sidebar-item__anchor" title="CLI"><a href="/concepts/printable/#cli">CLI</a></li><li class="sidebar-item__anchor" title="Loader Features"><a href="/concepts/printable/#loader-features">Loader Features</a></li><li class="sidebar-item__anchor" title="Resolving Loaders"><a href="/concepts/printable/#resolving-loaders">Resolving Loaders</a></li><li class="sidebar-item__anchor" title="Plugins"><a href="/concepts/printable/#plugins-1">Plugins</a></li><li class="sidebar-item__anchor" title="Anatomy"><a href="/concepts/printable/#anatomy">Anatomy</a></li><li class="sidebar-item__anchor" title="Usage"><a href="/concepts/printable/#usage-1">Usage</a></li><li class="sidebar-item__anchor" title="Configuration"><a href="/concepts/printable/#configuration-1">Configuration</a></li><li class="sidebar-item__anchor" title="Node API"><a href="/concepts/printable/#node-api">Node API</a></li><li class="sidebar-item__anchor" title="Configuration"><a href="/concepts/printable/#configuration-2">Configuration</a></li><li class="sidebar-item__anchor" title="Simple Configuration"><a href="/concepts/printable/#simple-configuration">Simple Configuration</a></li><li class="sidebar-item__anchor" title="Multiple Targets"><a href="/concepts/printable/#multiple-targets">Multiple Targets</a></li><li class="sidebar-item__anchor" title="Using other Configuration Languages"><a href="/concepts/printable/#using-other-configuration-languages">Using other Configuration Languages</a></li><li class="sidebar-item__anchor" title="Modules"><a href="/concepts/printable/#modules">Modules</a></li><li class="sidebar-item__anchor" title="What is a webpack Module"><a href="/concepts/printable/#what-is-a-webpack-module">What is a webpack Module</a></li><li class="sidebar-item__anchor" title="Supported Module Types"><a href="/concepts/printable/#supported-module-types">Supported Module Types</a></li><li class="sidebar-item__anchor" title="Module Resolution"><a href="/concepts/printable/#module-resolution">Module Resolution</a></li><li class="sidebar-item__anchor" title="Resolving rules in webpack"><a href="/concepts/printable/#resolving-rules-in-webpack">Resolving rules in webpack</a></li><li class="sidebar-item__anchor" title="Absolute paths"><a href="/concepts/printable/#absolute-paths">Absolute paths</a></li><li class="sidebar-item__anchor" title="Relative paths"><a href="/concepts/printable/#relative-paths">Relative paths</a></li><li class="sidebar-item__anchor" title="Module paths"><a href="/concepts/printable/#module-paths">Module paths</a></li><li class="sidebar-item__anchor" title="Resolving Loaders"><a href="/concepts/printable/#resolving-loaders-1">Resolving Loaders</a></li><li class="sidebar-item__anchor" title="Caching"><a href="/concepts/printable/#caching">Caching</a></li><li class="sidebar-item__anchor" title="Dependency Graph"><a href="/concepts/printable/#dependency-graph">Dependency Graph</a></li><li class="sidebar-item__anchor" title="Targets"><a href="/concepts/printable/#targets">Targets</a></li><li class="sidebar-item__anchor" title="Usage"><a href="/concepts/printable/#usage-2">Usage</a></li><li class="sidebar-item__anchor" title="Multiple Targets"><a href="/concepts/printable/#multiple-targets-1">Multiple Targets</a></li><li class="sidebar-item__anchor" title="Resources"><a href="/concepts/printable/#resources">Resources</a></li><li class="sidebar-item__anchor" title="The Manifest"><a href="/concepts/printable/#the-manifest">The Manifest</a></li><li class="sidebar-item__anchor" title="Runtime"><a href="/concepts/printable/#runtime">Runtime</a></li><li class="sidebar-item__anchor" title="Manifest"><a href="/concepts/printable/#manifest">Manifest</a></li><li class="sidebar-item__anchor" title="The Problem"><a href="/concepts/printable/#the-problem">The Problem</a></li><li class="sidebar-item__anchor" title="Hot Module Replacement"><a href="/concepts/printable/#hot-module-replacement">Hot Module Replacement</a></li><li class="sidebar-item__anchor" title="How It Works"><a href="/concepts/printable/#how-it-works">How It Works</a></li><li class="sidebar-item__anchor" title="In the Application"><a href="/concepts/printable/#in-the-application">In the Application</a></li><li class="sidebar-item__anchor" title="In the Compiler"><a href="/concepts/printable/#in-the-compiler">In the Compiler</a></li><li class="sidebar-item__anchor" title="In a Module"><a href="/concepts/printable/#in-a-module">In a Module</a></li><li class="sidebar-item__anchor" title="In the Runtime"><a href="/concepts/printable/#in-the-runtime">In the Runtime</a></li><li class="sidebar-item__anchor" title="Get Started"><a href="/concepts/printable/#get-started">Get Started</a></li><li class="sidebar-item__anchor" title="Why webpack"><a href="/concepts/printable/#why-webpack">Why webpack</a></li><li class="sidebar-item__anchor" title="IIFE's - Immediately invoked function expressions"><a href="/concepts/printable/#iifes---immediately-invoked-function-expressions">IIFE's - Immediately invoked function expressions</a></li><li class="sidebar-item__anchor" title="Birth of JavaScript Modules happened thanks to Node.js"><a href="/concepts/printable/#birth-of-javascript-modules-happened-thanks-to-nodejs">Birth of JavaScript Modules happened thanks to Node.js</a></li><li class="sidebar-item__anchor" title="npm + Node.js + modules -- mass distribution"><a href="/concepts/printable/#npm--nodejs--modules----mass-distribution">npm + Node.js + modules -- mass distribution</a></li><li class="sidebar-item__anchor" title="ESM - ECMAScript Modules"><a href="/concepts/printable/#esm---ecmascript-modules">ESM - ECMAScript Modules</a></li><li class="sidebar-item__anchor" title="Wouldn't it be nice…"><a href="/concepts/printable/#wouldnt-it-be-nice">Wouldn't it be nice…</a></li></ul></div></div></div></nav><section class="page"><div class="page-links"><a class="page-links__link" href="https://github.com/webpack/webpack.js.org/edit/master/src/content/concepts/loaders.mdx">Edit Document<i class="page-links__icon icon-edit"></i></a><span class="page-links__gap">|</span><button class="page-links__link page-links__print as-link" title="Print this page">Print Document<img src="/96ccbfac58b65e83657a220603e00abe.svg"/></button></div><div class="markdown"><h1>Loaders</h1><p>Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you <code>import</code> or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or inline images as data URLs. Loaders even allow you to do things like <code>import</code> CSS files directly from your JavaScript modules!</p><h2 id="example">Example<a href="#example" aria-hidden="true"><span class="icon icon-link"></span></a></h2><p>For example, you can use loaders to tell webpack to load a CSS file or to convert TypeScript to JavaScript. To do this, you would start by installing the loaders you need:</p><pre><code><span class="token function">npm</span> <span class="token function">install</span> --save-dev css-loader ts-loader</code></pre><p>And then instruct webpack to use the <a href="/loaders/css-loader"><code>css-loader</code></a> for every <code>.css</code> file and the <a href="https://github.com/TypeStrong/ts-loader"><code>ts-loader</code></a> for all <code>.ts</code> files:</p><p><strong>webpack.config.js</strong></p><pre><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> test<span class="token punctuation">:</span> <span class="token regex">/\.css$/</span><span class="token punctuation">,</span> use<span class="token punctuation">:</span> <span class="token string">'css-loader'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> test<span class="token punctuation">:</span> <span class="token regex">/\.ts$/</span><span class="token punctuation">,</span> use<span class="token punctuation">:</span> <span class="token string">'ts-loader'</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre><h2 id="using-loaders">Using Loaders<a href="#using-loaders" aria-hidden="true"><span class="icon icon-link"></span></a></h2><p>There are three ways to use loaders in your application:</p><ul><li><a href="#configuration">Configuration</a> (recommended): Specify them in your <strong>webpack.config.js</strong> file.</li><li><a href="#inline">Inline</a>: Specify them explicitly in each <code>import</code> statement.</li><li><a href="#cli">CLI</a>: Specify them within a shell command.</li></ul><h3 id="configuration">Configuration<a href="#configuration" aria-hidden="true"><span class="icon icon-link"></span></a></h3><p><a href="/configuration/module/#modulerules"><code>module.rules</code></a> allows you to specify several loaders within your webpack configuration.
This is a concise way to display loaders, and helps to maintain clean code. It also offers you a full overview of each respective loader.</p><p>Loaders are evaluated/executed from right to left (or from bottom to top). In the example below execution starts with sass-loader, continues with css-loader and finally ends with style-loader. See <a href="/concepts/loaders/#loader-features">"Loader Features"</a> for more information about loaders order.</p><pre><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
test<span class="token punctuation">:</span> <span class="token regex">/\.css$/</span><span class="token punctuation">,</span>
use<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<!-- -->// <a href="/loaders/style-loader">style-loader</a>
<span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">'style-loader'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<!-- -->// <a href="/loaders/css-loader">css-loader</a>
<span class="token punctuation">{</span>
loader<span class="token punctuation">:</span> <span class="token string">'css-loader'</span><span class="token punctuation">,</span>
options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
modules<span class="token punctuation">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<!-- -->// <a href="/loaders/sass-loader">sass-loader</a>
<span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">'sass-loader'</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre><h3 id="inline">Inline<a href="#inline" aria-hidden="true"><span class="icon icon-link"></span></a></h3><p>It's possible to specify loaders in an <code>import</code> statement, or any <a href="/api/module-methods">equivalent "importing" method</a>. Separate loaders from the resource with <code>!</code>. Each part is resolved relative to the current directory.</p><pre><code><span class="token keyword">import</span> Styles <span class="token keyword">from</span> <span class="token string">'style-loader!css-loader?modules!./styles.css'</span><span class="token punctuation">;</span></code></pre><p>It's possible to override any loaders, preLoaders and postLoaders from the <a href="/configuration">configuration</a> by prefixing the inline <code>import</code> statement:</p><ul><li>Prefixing with <code>!</code> will disable all configured normal loaders</li></ul><pre><code><span class="token keyword">import</span> Styles <span class="token keyword">from</span> <span class="token string">'!style-loader!css-loader?modules!./styles.css'</span><span class="token punctuation">;</span></code></pre><ul><li>Prefixing with <code>!!</code> will disable all configured loaders (preLoaders, loaders, postLoaders)</li></ul><pre><code><span class="token keyword">import</span> Styles <span class="token keyword">from</span> <span class="token string">'!!style-loader!css-loader?modules!./styles.css'</span><span class="token punctuation">;</span></code></pre><ul><li>Prefixing with <code>-!</code> will disable all configured preLoaders and loaders but not postLoaders</li></ul><pre><code><span class="token keyword">import</span> Styles <span class="token keyword">from</span> <span class="token string">'-!style-loader!css-loader?modules!./styles.css'</span><span class="token punctuation">;</span></code></pre><p>Options can be passed with a query parameter, e.g. <code>?key=value&foo=bar</code>, or a JSON object, e.g. <code>?{"key":"value","foo":"bar"}</code>.</p><blockquote class="tip"><p>Use <code>module.rules</code> whenever possible, as this will reduce boilerplate in your source code and allow you to debug or locate a loader faster if something goes south.</p></blockquote><h3 id="cli">CLI<a href="#cli" aria-hidden="true"><span class="icon icon-link"></span></a></h3><p>You can also use loaders through the CLI:</p><pre><code>webpack --module-bind jade-loader --module-bind <span class="token string">'css=style-loader!css-loader'</span></code></pre><p>This uses the <code>jade-loader</code> for <code>.jade</code> files, and the <a href="/loaders/style-loader"><code>style-loader</code></a> and <a href="/loaders/css-loader"><code>css-loader</code></a> for <code>.css</code> files.</p><h2 id="loader-features">Loader Features<a href="#loader-features" aria-hidden="true"><span class="icon icon-link"></span></a></h2><ul><li>Loaders can be chained. Each loader in the chain applies transformations to the processed resource. A chain is executed in reverse order. The first loader passes its result (resource with applied transformations) to the next one, and so forth. Finally, webpack expects JavaScript to be returned by the last loader in the chain.</li><li>Loaders can be synchronous or asynchronous.</li><li>Loaders run in Node.js and can do everything that’s possible there.</li><li>Loaders can be configured with an <code>options</code> object (using <code>query</code> parameters to set options is still supported but has been deprecated).</li><li>Normal modules can export a loader in addition to the normal <code>main</code> via <code>package.json</code> with the <code>loader</code> field.</li><li>Plugins can give loaders more features.</li><li>Loaders can emit additional arbitrary files.</li></ul><p>Loaders provide a way to customize the output through their preprocessing functions. Users now have more flexibility to include fine-grained logic such as compression, packaging, language translations and <a href="/loaders">more</a>.</p><h2 id="resolving-loaders">Resolving Loaders<a href="#resolving-loaders" aria-hidden="true"><span class="icon icon-link"></span></a></h2><p>Loaders follow the standard <a href="/concepts/module-resolution/">module resolution</a>. In most cases it will be loaded from the <a href="/concepts/module-resolution/#module-paths">module path</a> (think <code>npm install</code>, <code>node_modules</code>).</p><p>A loader module is expected to export a function and be written in Node.js compatible JavaScript. They are most commonly managed with npm, but you can also have custom loaders as files within your application. By convention, loaders are usually named <code>xxx-loader</code> (e.g. <code>json-loader</code>). See <a href="/contribute/writing-a-loader/">"Writing a Loader"</a> for more information.</p><div class="contributors__section"><hr/><h3>Contributors</h3><div class="contributors"><div class="contributors__list"><a class="contributor" href="https://github.com/manekinekko"><img alt="manekinekko" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->manekinekko</span></a><a class="contributor" href="https://github.com/evenstensberg"><img alt="evenstensberg" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->evenstensberg</span></a><a class="contributor" href="https://github.com/SpaceK33z"><img alt="SpaceK33z" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->SpaceK33z</span></a><a class="contributor" href="https://github.com/gangachris"><img alt="gangachris" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->gangachris</span></a><a class="contributor" href="https://github.com/TheLarkInn"><img alt="TheLarkInn" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->TheLarkInn</span></a><a class="contributor" href="https://github.com/simon04"><img alt="simon04" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->simon04</span></a><a class="contributor" href="https://github.com/jhnns"><img alt="jhnns" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->jhnns</span></a><a class="contributor" href="https://github.com/byzyk"><img alt="byzyk" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->byzyk</span></a><a class="contributor" href="https://github.com/debs-obrien"><img alt="debs-obrien" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->debs-obrien</span></a><a class="contributor" href="https://github.com/EugeneHlushko"><img alt="EugeneHlushko" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->EugeneHlushko</span></a><a class="contributor" href="https://github.com/wizardofhogwarts"><img alt="wizardofhogwarts" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->wizardofhogwarts</span></a><a class="contributor" href="https://github.com/lukasgeiter"><img alt="lukasgeiter" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->lukasgeiter</span></a><a class="contributor" href="https://github.com/furkle"><img alt="furkle" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->furkle</span></a></div></div></div></div></section><div class="gitter"><div class="gitter__button"><i class="gitter__icon icon-gitter"></i></div></div></div><footer class="footer"><div class="container footer__inner"><section class="footer__left"><a class="footer__link" href="/guides/getting-started/">Get Started</a><a class="footer__link" href="/organization/">Organization</a><a class="footer__link" href="/starter-kits/">Starter Kits</a><a class="footer__link" href="/comparison/">Comparison</a></section><section class="footer__middle"><a class="footer__icon" href="/"><img src="/d19378a95ebe6b15d5ddea281138dcf4.svg" alt="webpack icon"/></a></section><section class="footer__right"><a href="https://webpack.threadless.com/" target="_blank" rel="noopener" class="footer__link">Swag Store</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" class="footer__link">Gitter</a><a href="https://github.com/webpack/webpack/releases" target="_blank" rel="noopener" class="footer__link">Changelog</a><a class="footer__link footer__license" href="/license"><img alt="Creative Commons License" src="/7052446b5e67df4434f4031afd2f1497.svg"/><img alt="Creative Commons License" src="/7ebb1b3901ce119694f65e04f6347ef5.svg"/></a></section></div></footer></div></div><script src="/vendor.bundle.js"></script><script src="/index.bundle.js"></script></body></html>