-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
123 lines (120 loc) · 44.4 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!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>Concepts | 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="Concepts | 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/"/><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 sidebar-item--open "><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 "><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/index.md">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>Concepts</h1><div><p>At its core, <strong>webpack</strong> is a <em>static module bundler</em> for modern JavaScript applications. When webpack processes your application, it internally builds a <a href="/concepts/dependency-graph/">dependency graph</a> which maps every module your project needs and generates one or more <em>bundles</em>.</p>
<blockquote class="tip">
<p>Learn more about JavaScript modules and webpack modules <a href="/concepts/modules">here</a>.</p>
</blockquote>
<p>Since version 4.0.0, <strong>webpack does not require a configuration file</strong> to bundle your project. Nevertheless, it is <a href="/configuration">incredibly configurable</a> to better fit your needs.</p>
<p>To get started you only need to understand its <strong>Core Concepts</strong>:</p>
<ul>
<li><a href="#entry">Entry</a></li>
<li><a href="#output">Output</a></li>
<li><a href="#loaders">Loaders</a></li>
<li><a href="#plugins">Plugins</a></li>
<li><a href="#mode">Mode</a></li>
<li><a href="#browser-compatibility">Browser Compatibility</a></li>
</ul>
<p>This document is intended to give a <strong>high-level</strong> overview of these concepts, while providing links to detailed concept-specific use cases.</p>
<p>For a better understanding of the ideas behind module bundlers and how they work under the hood, consult these resources:</p>
<ul>
<li><a href="https://www.youtube.com/watch?v=UNMkLHzofQI">Manually Bundling an Application</a></li>
<li><a href="https://www.youtube.com/watch?v=Gc9-7PBqOC8">Live Coding a Simple Module Bundler</a></li>
<li><a href="https://github.com/ronami/minipack">Detailed Explanation of a Simple Module Bundler</a></li>
</ul>
<h2 id="entry">Entry<a href="#entry" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>An <strong>entry point</strong> indicates which module webpack should use to begin building out its internal <a href="/concepts/dependency-graph/">dependency graph</a>. webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).</p>
<p>By default its value is <code>./src/index.js</code>, but you can specify a different (or multiple entry points) by setting an <a href="/configuration/entry-context/#entry"><code>entry</code> property in the webpack configuration</a>. For example:</p>
<p><strong>webpack.config.js</strong></p>
<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
entry<span class="token punctuation">:</span> <span class="token string">'./path/to/my/entry/file.js'</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<blockquote class="tip">
<p>Learn more in the <a href="/concepts/entry-points">entry points</a> section.</p>
</blockquote>
<h2 id="output">Output<a href="#output" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>The <strong>output</strong> property tells webpack where to emit the <em>bundles</em> it creates and how to name these files. It defaults to <code>./dist/main.js</code> for the main output file and to the <code>./dist</code> folder for any other generated file.</p>
<p>You can configure this part of the process by specifying an <code>output</code> field in your configuration:</p>
<p><strong>webpack.config.js</strong></p>
<pre><code class="hljs language-javascript"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
entry<span class="token punctuation">:</span> <span class="token string">'./path/to/my/entry/file.js'</span><span class="token punctuation">,</span>
output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
path<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'dist'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
filename<span class="token punctuation">:</span> <span class="token string">'my-first-webpack.bundle.js'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>In the example above, we use the <code>output.filename</code> and the <code>output.path</code> properties to tell webpack the name of our bundle and where we want it to be emitted to. In case you're wondering about the path module being imported at the top, it is a core <a href="https://nodejs.org/api/modules.html">Node.js module</a> that gets used to manipulate file paths.</p>
<blockquote class="tip">
<p>The <code>output</code> property has <a href="/configuration/output">many more configurable features</a>. If you want to learn about the concepts behind it, you can <a href="/concepts/output">read more in the output section</a>.</p>
</blockquote>
<h2 id="loaders">Loaders<a href="#loaders" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Out of the box, webpack only understands JavaScript and JSON files. <strong>Loaders</strong> allow webpack to process other types of files and convert them into valid <a href="/concepts/modules">modules</a> that can be consumed by your application and added to the dependency graph.</p>
<blockquote class="warning">
<p>Note that the ability to <code>import</code> any type of module, e.g. <code>.css</code> files, is a feature specific to webpack and may not be supported by other bundlers or task runners. We feel this extension of the language is warranted as it allows developers to build a more accurate dependency graph.</p>
</blockquote>
<p>At a high level, <strong>loaders</strong> have two properties in your webpack configuration:</p>
<ol>
<li>The <code>test</code> property identifies which file or files should be transformed.</li>
<li>The <code>use</code> property indicates which loader should be used to do the transforming.</li>
</ol>
<p><strong>webpack.config.js</strong></p>
<pre><code class="hljs language-javascript"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
filename<span class="token punctuation">:</span> <span class="token string">'my-first-webpack.bundle.js'</span>
<span class="token punctuation">}</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">/\.txt$/</span><span class="token punctuation">,</span> use<span class="token punctuation">:</span> <span class="token string">'raw-loader'</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>The configuration above has defined a <code>rules</code> property for a single module with two required properties: <code>test</code> and <code>use</code>. This tells webpack's compiler the following:</p>
<blockquote>
<p>"Hey webpack compiler, when you come across a path that resolves to a '.txt' file inside of a <code>require()</code>/<code>import</code> statement, <strong>use</strong> the <code>raw-loader</code> to transform it before you add it to the bundle."</p>
</blockquote>
<blockquote class="warning">
<p>It is important to remember that when defining rules in your webpack config, you are defining them under <code>module.rules</code> and not <code>rules</code>. For your benefit, webpack will warn you if this is done incorrectly.</p>
</blockquote>
<blockquote class="warning">
<p>Keep in mind that when using regex to match files, you may not quote it. i.e <code>/\.txt$/</code> is not the same as <code>'/\.txt$/'</code> or <code>"/\.txt$/"</code>. The former instructs webpack to match any file that ends with .txt and the latter instructs webpack to match a single file with an absolute path '.txt'; this is likely not your intention.</p>
</blockquote>
<p>You can check further customization when including loaders in the <a href="/concepts/loaders">loaders section</a>.</p>
<h2 id="plugins">Plugins<a href="#plugins" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.</p>
<blockquote class="tip">
<p>Check out the <a href="/api/plugins">plugin interface</a> and how to use it to extend webpack's capabilities.</p>
</blockquote>
<p>In order to use a plugin, you need to <code>require()</code> it and add it to the <code>plugins</code> array. Most plugins are customizable through options. Since you can use a plugin multiple times in a config for different purposes, you need to create an instance of it by calling it with the <code>new</code> operator.</p>
<p><strong>webpack.config.js</strong></p>
<pre><code class="hljs language-javascript"><span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'html-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//installed via npm</span>
<span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//to access built-in plugins</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
module<span class="token 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">/\.txt$/</span><span class="token punctuation">,</span> use<span class="token punctuation">:</span> <span class="token string">'raw-loader'</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>template<span class="token punctuation">:</span> <span class="token string">'./src/index.html'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>In the example above, the <code>html-webpack-plugin</code> generates an HTML file for your application by injecting automatically all your generated bundles.</p>
<blockquote class="tip">
<p>There are many plugins that webpack provides out of the box! Check out the <a href="/plugins">list of plugins</a>.</p>
</blockquote>
<p>Using plugins in your webpack config is straightforward. However, there are many use cases that are worth further exploration. <a href="/concepts/plugins">Learn more about them here</a>.</p>
<h2 id="mode">Mode<a href="#mode" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>By setting the <code>mode</code> parameter to either <code>development</code>, <code>production</code> or <code>none</code>, you can enable webpack's built-in optimizations that correspond to each environment. The default value is <code>production</code>.</p>
<pre><code class="hljs language-javascript">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
mode<span class="token punctuation">:</span> <span class="token string">'production'</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Learn more about the <a href="/configuration/mode">mode configuration here</a> and what optimizations take place on each value.</p>
<h2 id="browser-compatibility">Browser Compatibility<a href="#browser-compatibility" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>webpack supports all browsers that are <a href="https://kangax.github.io/compat-table/es5/">ES5-compliant</a> (IE8 and below are not supported). webpack needs <code>Promise</code> for <a href="/guides/code-splitting/#dynamic-imports"><code>import()</code> and <code>require.ensure()</code></a>. If you want to support older browsers, you will need to <a href="/guides/shimming/">load a polyfill</a> before using these expressions.</p>
</div><div class="contributors__section"><hr/><h3>Contributors</h3><div class="contributors"><div class="contributors__list"><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/jhnns"><img alt="jhnns" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->jhnns</span></a><a class="contributor" href="https://github.com/grgur"><img alt="grgur" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->grgur</span></a><a class="contributor" href="https://github.com/johnstew"><img alt="johnstew" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->johnstew</span></a><a class="contributor" href="https://github.com/jimrfenner"><img alt="jimrfenner" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->jimrfenner</span></a><a class="contributor" href="https://github.com/TheDutchCoder"><img alt="TheDutchCoder" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->TheDutchCoder</span></a><a class="contributor" href="https://github.com/adambraimbridge"><img alt="adambraimbridge" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->adambraimbridge</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/jeremenichelli"><img alt="jeremenichelli" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->jeremenichelli</span></a><a class="contributor" href="https://github.com/arjunsajeev"><img alt="arjunsajeev" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->arjunsajeev</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/yairhaimo"><img alt="yairhaimo" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->yairhaimo</span></a><a class="contributor" href="https://github.com/farskid"><img alt="farskid" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->farskid</span></a><a class="contributor" href="https://github.com/LukeMwila"><img alt="LukeMwila" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->LukeMwila</span></a><a class="contributor" href="https://github.com/Jalitha"><img alt="Jalitha" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->Jalitha</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>