-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
618 lines (603 loc) · 107 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
<!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"/><meta name="robots" content="noindex,nofollow"/><title>Combined printable page | 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="Combined printable page | 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/printable/"/><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 "><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 sidebar-item--open "><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/printable.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>Printable</h1><div><h1 id="concepts">Concepts<a href="#concepts" aria-hidden="true"><span class="icon icon-link"></span></a></h1>
<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>
<h1 id="entry-points">Entry Points<a href="#entry-points" aria-hidden="true"><span class="icon icon-link"></span></a></h1>
<p>As mentioned in <a href="/guides/getting-started/#using-a-configuration">Getting Started</a>, there are multiple ways to define the <code>entry</code> property in your webpack configuration. We will show you the ways you <strong>can</strong> configure the <code>entry</code> property, in addition to explaining why it may be useful to you.</p>
<h2 id="single-entry-shorthand-syntax">Single Entry (Shorthand) Syntax<a href="#single-entry-shorthand-syntax" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Usage: <code>entry: string | [string]</code></p>
<p><strong>webpack.config.js</strong></p>
<pre><code class="hljs language-javascript">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>
<p>The single entry syntax for the <code>entry</code> property is a shorthand for:</p>
<p><strong>webpack.config.js</strong></p>
<pre><code class="hljs language-javascript">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 punctuation">{</span>
main<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><span class="token punctuation">;</span></code></pre>
<blockquote class="tip">
<p><strong>What happens when you pass an array to <code>entry</code>?</strong> Passing an array of file paths to the <code>entry</code> property creates what is known as a <strong>"multi-main entry"</strong>. This is useful when you would like to inject multiple dependent files together and graph their dependencies into one "chunk".</p>
</blockquote>
<p>This is a great choice when you are looking to quickly setup a webpack configuration for an application or tool with one entry point (i.e. a library). However, there is not much flexibility in extending or scaling your configuration with this syntax.</p>
<h2 id="object-syntax">Object Syntax<a href="#object-syntax" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Usage: <code>entry: { <entryChunkName> string | [string] }</code></p>
<p><strong>webpack.config.js</strong></p>
<pre><code class="hljs language-javascript">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 punctuation">{</span>
app<span class="token punctuation">:</span> <span class="token string">'./src/app.js'</span><span class="token punctuation">,</span>
adminApp<span class="token punctuation">:</span> <span class="token string">'./src/adminApp.js'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>The object syntax is more verbose. However, this is the most scalable way of defining entry/entries in your application.</p>
<blockquote class="tip">
<p><strong>"Scalable webpack configurations"</strong> are ones that can be reused and combined with other partial configurations. This is a popular technique used to separate concerns by environment, build target, and runtime. They are then merged using specialized tools like <a href="https://github.com/survivejs/webpack-merge">webpack-merge</a>.</p>
</blockquote>
<h2 id="scenarios">Scenarios<a href="#scenarios" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Below is a list of entry configurations and their real-world use cases:</p>
<h3 id="separate-app-and-vendor-entries">Separate App and Vendor Entries<a href="#separate-app-and-vendor-entries" aria-hidden="true"><span class="icon icon-link"></span></a></h3>
<blockquote class="tip">
<p>In webpack version < 4 it was common to add vendors as a separate entry point to compile it as a separate file (in combination with the <code>CommonsChunkPlugin</code>). <br><br> This is discouraged in webpack 4. Instead, the <a href="/configuration/optimization/#optimizationsplitchunks"><code>optimization.splitChunks</code></a> option takes care of separating vendors and app modules and creating a separate file. <strong>Do not</strong> create an entry for vendors or other stuff that is not the starting point of execution.</p>
</blockquote>
<h3 id="multi-page-application">Multi Page Application<a href="#multi-page-application" aria-hidden="true"><span class="icon icon-link"></span></a></h3>
<p><strong>webpack.config.js</strong></p>
<pre><code class="hljs language-javascript">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 punctuation">{</span>
pageOne<span class="token punctuation">:</span> <span class="token string">'./src/pageOne/index.js'</span><span class="token punctuation">,</span>
pageTwo<span class="token punctuation">:</span> <span class="token string">'./src/pageTwo/index.js'</span><span class="token punctuation">,</span>
pageThree<span class="token punctuation">:</span> <span class="token string">'./src/pageThree/index.js'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p><strong>What does this do?</strong> We are telling webpack that we would like 3 separate dependency graphs (like the above example).</p>
<p><strong>Why?</strong> In a multi-page application, the server is going to fetch a new HTML document for you. The page reloads this new document and assets are redownloaded. However, this gives us the unique opportunity to do things like using <a href="/configuration/optimization/#optimizationsplitchunks"><code>optimization.splitChunks</code></a> to create bundles of shared application code between each page. Multi-page applications that reuse a lot of code/modules between entry points can greatly benefit from these techniques, as the number of entry points increases.</p>
<blockquote class="tip">
<p>As a rule of thumb: Use exactly one entry point for each HTML document.</p>
</blockquote>
<h1 id="output-1">Output<a href="#output-1" aria-hidden="true"><span class="icon icon-link"></span></a></h1>
<p>Configuring the <code>output</code> configuration options tells webpack how to write the compiled files to disk. Note that, while there can be multiple <code>entry</code> points, only one <code>output</code> configuration is specified.</p>
<h2 id="usage">Usage<a href="#usage" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>The minimum requirement for the <code>output</code> property in your webpack configuration is to set its value to an object and provide an <a href="/configuration/output/#outputfilename"><code>output.filename</code></a> to use for the output file(s):</p>
<p><strong>webpack.config.js</strong></p>
<pre><code class="hljs language-javascript">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">'bundle.js'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>This configuration would output a single <code>bundle.js</code> file into the <code>dist</code> directory.</p>
<h2 id="multiple-entry-points">Multiple Entry Points<a href="#multiple-entry-points" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>If your configuration creates more than a single "chunk" (as with multiple entry points or when using plugins like CommonsChunkPlugin), you should use <a href="/configuration/output/#outputfilename">substitutions</a> to ensure that each file has a unique name.</p>
<pre><code class="hljs language-javascript">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 punctuation">{</span>
app<span class="token punctuation">:</span> <span class="token string">'./src/app.js'</span><span class="token punctuation">,</span>
search<span class="token punctuation">:</span> <span class="token string">'./src/search.js'</span>
<span class="token punctuation">}</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">'[name].js'</span><span class="token punctuation">,</span>
path<span class="token punctuation">:</span> __dirname <span class="token operator">+</span> <span class="token string">'/dist'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// writes to disk: ./dist/app.js, ./dist/search.js</span></code></pre>
<h2 id="advanced">Advanced<a href="#advanced" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Here's a more complicated example of using a CDN and hashes for assets:</p>
<p><strong>config.js</strong></p>
<pre><code class="hljs language-javascript">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token comment">//...</span>
output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
path<span class="token punctuation">:</span> <span class="token string">'/home/proj/cdn/assets/[hash]'</span><span class="token punctuation">,</span>
publicPath<span class="token punctuation">:</span> <span class="token string">'https://cdn.example.com/assets/[hash]/'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>In cases where the eventual <code>publicPath</code> of output files isn't known at compile time, it can be left blank and set dynamically at runtime via the <code>__webpack_public_path__</code> variable in the entry point file:</p>
<pre><code class="hljs language-javascript">__webpack_public_path__ <span class="token operator">=</span> myRuntimePublicPath<span class="token punctuation">;</span>
<span class="token comment">// rest of your application entry</span></code></pre>
<h1 id="loaders-1">Loaders<a href="#loaders-1" aria-hidden="true"><span class="icon icon-link"></span></a></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 class="hljs language-bash"><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 class="hljs language-js">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 class="hljs language-js-with-links">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>
<span class="token comment">// [style-loader](/loaders/style-loader)</span>
<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>
<span class="token comment">// [css-loader](/loaders/css-loader)</span>
<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>
<span class="token comment">// [sass-loader](/loaders/sass-loader)</span>
<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 class="hljs language-js"><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 class="hljs language-js"><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 class="hljs language-js"><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 class="hljs language-js"><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 class="hljs language-bash">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>
<h1 id="plugins-1">Plugins<a href="#plugins-1" aria-hidden="true"><span class="icon icon-link"></span></a></h1>
<p><strong>Plugins</strong> are the <a href="https://github.com/webpack/tapable">backbone</a> of webpack. webpack itself is built on the <strong>same plugin system</strong> that you use in your webpack configuration!</p>
<p>They also serve the purpose of doing <strong>anything else</strong> that a <a href="/concepts/loaders">loader</a> cannot do.</p>
<h2 id="anatomy">Anatomy<a href="#anatomy" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>A webpack <strong>plugin</strong> is a JavaScript object that has an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply"><code>apply</code></a> method. This <code>apply</code> method is called by the webpack compiler, giving access to the <strong>entire</strong> compilation lifecycle.</p>
<p><strong>ConsoleLogOnBuildWebpackPlugin.js</strong></p>
<pre><code class="hljs language-javascript"><span class="token keyword">const</span> pluginName <span class="token operator">=</span> <span class="token string">'ConsoleLogOnBuildWebpackPlugin'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">ConsoleLogOnBuildWebpackPlugin</span> <span class="token punctuation">{</span>
<span class="token function">apply</span><span class="token punctuation">(</span>compiler<span class="token punctuation">)</span> <span class="token punctuation">{</span>
compiler<span class="token punctuation">.</span>hooks<span class="token punctuation">.</span>run<span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span>pluginName<span class="token punctuation">,</span> compilation <span class="token operator">=></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">'The webpack build process is starting!!!'</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>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ConsoleLogOnBuildWebpackPlugin<span class="token punctuation">;</span></code></pre>
<p>The first parameter of the tap method of the compiler hook should be a camelized version of the plugin name. It is advisable to use a constant for this so it can be reused in all hooks.</p>
<h2 id="usage-1">Usage<a href="#usage-1" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Since <strong>plugins</strong> can take arguments/options, you must pass a <code>new</code> instance to the <code>plugins</code> property in your webpack configuration.</p>
<p>Depending on how you are using webpack, there are multiple ways to use plugins.</p>
<h3 id="configuration-1">Configuration<a href="#configuration-1" aria-hidden="true"><span class="icon icon-link"></span></a></h3>
<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>
<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>
filename<span class="token punctuation">:</span> <span class="token string">'my-first-webpack.bundle.js'</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><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">/\.(js|jsx)$/</span><span class="token punctuation">,</span>
use<span class="token punctuation">:</span> <span class="token string">'babel-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">webpack<span class="token punctuation">.</span>ProgressPlugin</span><span class="token punctuation">(</span><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>
<h3 id="node-api">Node API<a href="#node-api" aria-hidden="true"><span class="icon icon-link"></span></a></h3>
<p>When using the Node API, you can also pass plugins via the <code>plugins</code> property in the configuration.</p>
<p><strong>some-node-script.js</strong></p>
<pre><code class="hljs language-javascript"><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 webpack runtime</span>
<span class="token keyword">const</span> configuration <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./webpack.config.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> compiler <span class="token operator">=</span> <span class="token function">webpack</span><span class="token punctuation">(</span>configuration<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>ProgressPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>compiler<span class="token punctuation">)</span><span class="token punctuation">;</span>
compiler<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> stats<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<blockquote class="tip">
<p>Did you know: The example seen above is extremely similar to the <a href="https://github.com/webpack/webpack/blob/e7087ffeda7fa37dfe2ca70b5593c6e899629a2c/bin/webpack.js#L290-L292">webpack runtime itself!</a> There are lots of great usage examples hiding in the <a href="https://github.com/webpack/webpack">webpack source code</a> that you can apply to your own configurations and scripts!</p>
</blockquote>
<h1 id="configuration-2">Configuration<a href="#configuration-2" aria-hidden="true"><span class="icon icon-link"></span></a></h1>
<p>You may have noticed that few webpack configurations look exactly alike. This is because <strong>webpack's configuration file is a JavaScript file that exports a webpack <a href="/configuration/">configuration</a>.</strong> This configuration is then processed by webpack based upon its defined properties.</p>
<p>Because it's a standard Node.js CommonJS module, you <strong>can do the following</strong>:</p>
<ul>
<li>import other files via <code>require(...)</code></li>
<li>use utilities on npm via <code>require(...)</code></li>
<li>use JavaScript control flow expressions, e.g. the <code>?:</code> operator</li>
<li>use constants or variables for often used values</li>
<li>write and execute functions to generate a part of the configuration</li>
</ul>
<p>Use these features when appropriate.</p>
<p>While they are technically feasible, <strong>the following practices should be avoided</strong>:</p>
<ul>
<li>Access CLI arguments, when using the webpack CLI (instead write your own CLI, or <a href="/configuration/configuration-types/">use <code>--env</code></a>)</li>
<li>Export non-deterministic values (calling webpack twice should result in the same output files)</li>
<li>Write long configurations (instead split the configuration into multiple files)</li>
</ul>
<blockquote class="tip">
<p>The most important part to take away from this document is that there are many different ways to format and style your webpack configuration. The key is to stick with something consistent that you and your team can understand and maintain.</p>
</blockquote>
<p>The examples below describe how webpack's configuration can be both expressive and configurable because <em>it is code</em>:</p>
<h2 id="simple-configuration">Simple Configuration<a href="#simple-configuration" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p><strong>webpack.config.js</strong></p>
<pre><code class="hljs language-javascript"><span class="token keyword">var</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>
mode<span class="token punctuation">:</span> <span class="token string">'development'</span><span class="token punctuation">,</span>
entry<span class="token punctuation">:</span> <span class="token string">'./foo.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">'foo.bundle.js'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p><em>See</em>: <a href="/configuration/">Configuration section</a> for all supported configuration options</p>
<h2 id="multiple-targets">Multiple Targets<a href="#multiple-targets" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Along with exporting a single configuration as an object, <a href="/configuration/configuration-types/#exporting-a-function">function</a> or <a href="/configuration/configuration-types/#exporting-a-promise">Promise</a>, you can export multiple configurations.</p>
<p><em>See</em>: <a href="/configuration/configuration-types/#exporting-multiple-configurations">Exporting multiple configurations</a></p>
<h2 id="using-other-configuration-languages">Using other Configuration Languages<a href="#using-other-configuration-languages" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>webpack accepts configuration files written in multiple programming and data languages.</p>
<p><em>See</em>: <a href="/configuration/configuration-languages/">Configuration Languages</a></p>
<h1 id="modules">Modules<a href="#modules" aria-hidden="true"><span class="icon icon-link"></span></a></h1>
<p>In <a href="https://en.wikipedia.org/wiki/Modular_programming">modular programming</a>, developers break programs up into discrete chunks of functionality called a <em>module</em>.</p>
<p>Each module has a smaller surface area than a full program, making verification, debugging, and testing trivial.
Well-written <em>modules</em> provide solid abstractions and encapsulation boundaries, so that each module has a coherent design and a clear purpose within the overall application.</p>
<p>Node.js has supported modular programming almost since its inception.
On the web, however, support for <em>modules</em> has been slow to arrive.
Multiple tools exist that support modular JavaScript on the web, with a variety of benefits and limitations.
webpack builds on lessons learned from these systems and applies the concept of <em>modules</em> to any file in your project.</p>
<h2 id="what-is-a-webpack-module">What is a webpack Module<a href="#what-is-a-webpack-module" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>In contrast to <a href="https://nodejs.org/api/modules.html">Node.js modules</a>, webpack <em>modules</em> can express their <em>dependencies</em> in a variety of ways. A few examples are:</p>
<ul>
<li>An <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">ES2015 <code>import</code></a> statement</li>
<li>A <a href="http://www.commonjs.org/specs/modules/1.0/">CommonJS</a> <code>require()</code> statement</li>
<li>An <a href="https://github.com/amdjs/amdjs-api/blob/master/AMD.md">AMD</a> <code>define</code> and <code>require</code> statement</li>
<li>An <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@import"><code>@import</code> statement</a> inside of a css/sass/less file.</li>
<li>An image url in a stylesheet <code>url(...)</code> or HTML <code><img src=...></code> file.</li>
</ul>
<h2 id="supported-module-types">Supported Module Types<a href="#supported-module-types" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>webpack supports modules written in a variety of languages and preprocessors, via <em>loaders</em>. <em>Loaders</em> describe to webpack <strong>how</strong> to process non-JavaScript <em>modules</em> and include these <em>dependencies</em> into your <em>bundles</em>.
The webpack community has built <em>loaders</em> for a wide variety of popular languages and language processors, including:</p>
<ul>
<li><a href="http://coffeescript.org">CoffeeScript</a></li>
<li><a href="https://www.typescriptlang.org">TypeScript</a></li>
<li><a href="https://babeljs.io">ESNext (Babel)</a></li>
<li><a href="http://sass-lang.com">Sass</a></li>
<li><a href="http://lesscss.org">Less</a></li>
<li><a href="http://stylus-lang.com">Stylus</a></li>
<li><a href="https://elm-lang.org/">Elm</a></li>
</ul>
<p>And many others! Overall, webpack provides a powerful and rich API for customization that allows one to use webpack for <strong>any stack</strong>, while staying <strong>non-opinionated</strong> about your development, testing, and production workflows.</p>
<p>For a full list, see <a href="/loaders"><strong>the list of loaders</strong></a> or <a href="/api/loaders"><strong>write your own</strong></a>.</p>
<h1 id="module-resolution">Module Resolution<a href="#module-resolution" aria-hidden="true"><span class="icon icon-link"></span></a></h1>
<p>A resolver is a library which helps in locating a module by its absolute path.
A module can be required as a dependency from another module as:</p>
<pre><code class="hljs language-js"><span class="token keyword">import</span> foo <span class="token keyword">from</span> <span class="token string">'path/to/module'</span><span class="token punctuation">;</span>
<span class="token comment">// or</span>
<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path/to/module'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>The dependency module can be from the application code or a third-party library. The resolver helps
webpack find the module code that needs to be included in the bundle for every such <code>require</code>/<code>import</code> statement.
webpack uses <a href="https://github.com/webpack/enhanced-resolve">enhanced-resolve</a> to resolve file paths while bundling modules.</p>
<h2 id="resolving-rules-in-webpack">Resolving rules in webpack<a href="#resolving-rules-in-webpack" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Using <code>enhanced-resolve</code>, webpack can resolve three kinds of file paths:</p>
<h3 id="absolute-paths">Absolute paths<a href="#absolute-paths" aria-hidden="true"><span class="icon icon-link"></span></a></h3>
<pre><code class="hljs language-js"><span class="token keyword">import</span> <span class="token string">'/home/me/file'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'C:\\Users\\me\\file'</span><span class="token punctuation">;</span></code></pre>
<p>Since we already have the absolute path to the file, no further resolution is required.</p>
<h3 id="relative-paths">Relative paths<a href="#relative-paths" aria-hidden="true"><span class="icon icon-link"></span></a></h3>
<pre><code class="hljs language-js"><span class="token keyword">import</span> <span class="token string">'../src/file1'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'./file2'</span><span class="token punctuation">;</span></code></pre>
<p>In this case, the directory of the resource file where the <code>import</code> or <code>require</code> occurs is taken to be the context directory. The relative path specified in the <code>import/require</code> is joined to this context path to produce the absolute path to the module.</p>
<h3 id="module-paths">Module paths<a href="#module-paths" aria-hidden="true"><span class="icon icon-link"></span></a></h3>
<pre><code class="hljs language-js"><span class="token keyword">import</span> <span class="token string">'module'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'module/lib/file'</span><span class="token punctuation">;</span></code></pre>
<p>Modules are searched for inside all directories specified in <a href="/configuration/resolve/#resolvemodules"><code>resolve.modules</code></a>.
You can replace the original module path by an alternate path by creating an alias for it using the <a href="/configuration/resolve/#resolvealias"><code>resolve.alias</code></a> configuration option.</p>
<p>Once the path is resolved based on the above rule, the resolver checks to see if the path points to a file or a directory. If the path points to a file:</p>
<ul>
<li>If the path has a file extension, then the file is bundled straightaway.</li>
<li>Otherwise, the file extension is resolved using the <a href="/configuration/resolve/#resolveextensions"><code>resolve.extensions</code></a> option, which tells the resolver which extensions are acceptable for resolution e.g. <code>.js</code>, <code>.jsx</code>.</li>
</ul>
<p>If the path points to a folder, then the following steps are taken to find the right file with the right extension:</p>
<ul>
<li>If the folder contains a <code>package.json</code> file, then fields specified in <a href="/configuration/resolve/#resolvemainfields"><code>resolve.mainFields</code></a> configuration option are looked up in order, and the first such field in <code>package.json</code> determines the file path.</li>
<li>If there is no <code>package.json</code> or if the <a href="/configuration/resolve/#resolvemainfields"><code>resolve.mainFields</code></a> do not return a valid path, file names specified in the <a href="/configuration/resolve/#resolvemainfiles"><code>resolve.mainFiles</code></a> configuration option are looked for in order, to see if a matching filename exists in the imported/required directory .</li>
<li>The file extension is then resolved in a similar way using the <a href="/configuration/resolve/#resolveextensions"><code>resolve.extensions</code></a> option.</li>
</ul>
<p>webpack provides reasonable <a href="/configuration/resolve">defaults</a> for these options depending on your build target.</p>
<h2 id="resolving-loaders-1">Resolving Loaders<a href="#resolving-loaders-1" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>This follows the same rules as those specified for file resolution. But the <a href="/configuration/resolve/#resolveloader"><code>resolveLoader</code></a> configuration option can be used to have separate resolution rules for loaders.</p>
<h2 id="caching">Caching<a href="#caching" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Every filesystem access is cached, so that multiple parallel or serial requests to the same file occur faster. In <a href="/configuration/watch/#watch">watch mode</a>, only modified files are evicted from the cache. If watch mode is off, then the cache gets purged before every compilation.</p>
<p>See <a href="/configuration/resolve">Resolve API</a> to learn more on the configuration options mentioned above.</p>
<h1 id="dependency-graph">Dependency Graph<a href="#dependency-graph" aria-hidden="true"><span class="icon icon-link"></span></a></h1>
<p>Any time one file depends on another, webpack treats this as a <em>dependency</em>. This allows webpack to take non-code assets, such as images or web fonts, and also provide them as <em>dependencies</em> for your application.</p>
<p>When webpack processes your application, it starts from a list of modules defined on the command line or in its config file.
Starting from these <a href="/concepts/entry-points/"><em>entry points</em></a>, webpack recursively builds a <em>dependency graph</em> that includes every module your application needs, then bundles all of those modules into a small number of <em>bundles</em> - often, just one - to be loaded by the browser.</p>
<blockquote class="tip">
<p>Bundling your application is especially powerful for <em>HTTP/1.1</em> clients, as it minimizes the number of times your app has to wait while the browser starts a new request. For <em>HTTP/2</em>, you can also use <a href="/guides/code-splitting/">Code Splitting</a> to achieve best results.</p>
</blockquote>
<h1 id="targets">Targets<a href="#targets" aria-hidden="true"><span class="icon icon-link"></span></a></h1>
<p>Because JavaScript can be written for both server and browser, webpack offers multiple deployment <em>targets</em> that you can set in your webpack <a href="/configuration">configuration</a>.</p>
<blockquote class="warning">
<p>The webpack <code>target</code> property is not to be confused with the <code>output.libraryTarget</code> property. For more information see <a href="/concepts/output/">our guide</a> on the <code>output</code> property.</p>
</blockquote>
<h2 id="usage-2">Usage<a href="#usage-2" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>To set the <code>target</code> property, you simply set the target value in your webpack config:</p>
<p><strong>webpack.config.js</strong></p>
<pre><code class="hljs language-javascript">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
target<span class="token punctuation">:</span> <span class="token string">'node'</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>In the example above, using <code>node</code> webpack will compile for usage in a Node.js-like environment (uses Node.js <code>require</code> to load chunks and not touch any built in modules like <code>fs</code> or <code>path</code>).</p>
<p>Each <em>target</em> has a variety of deployment/environment specific additions, support to fit its needs. See what <a href="/configuration/target/">targets are available</a>.</p>
<blockquote class="todo">
<p>Further expansion for other popular target values</p>
</blockquote>
<h2 id="multiple-targets-1">Multiple Targets<a href="#multiple-targets-1" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Although webpack does <strong>not</strong> support multiple strings being passed into the <code>target</code> property, you can create an isomorphic library by bundling two separate configurations:</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>
<span class="token keyword">const</span> serverConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
target<span class="token punctuation">:</span> <span class="token string">'node'</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">'lib.node.js'</span>
<span class="token punctuation">}</span>
<span class="token comment">//…</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> clientConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
target<span class="token punctuation">:</span> <span class="token string">'web'</span><span class="token punctuation">,</span> <span class="token comment">// <=== can be omitted as default is 'web'</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">'lib.js'</span>
<span class="token punctuation">}</span>
<span class="token comment">//…</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> serverConfig<span class="token punctuation">,</span> clientConfig <span class="token punctuation">]</span><span class="token punctuation">;</span></code></pre>
<p>The example above will create a <code>lib.js</code> and <code>lib.node.js</code> file in your <code>dist</code> folder.</p>
<h2 id="resources">Resources<a href="#resources" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>As seen from the options above, there are multiple deployment <em>targets</em> that you can choose from. Below is a list of examples and resources that you can refer to.</p>
<ul>
<li><strong><a href="https://github.com/TheLarkInn/compare-webpack-target-bundles">compare-webpack-target-bundles</a></strong>: A great resource for testing and viewing different webpack <em>targets</em>. Also great for bug reporting.</li>
<li><strong><a href="https://github.com/chentsulin/electron-react-boilerplate">Boilerplate of Electron-React Application</a></strong>: A good example of a build process for electron's main process and renderer process.</li>
</ul>
<blockquote class="todo">
<p>Need to find up to date examples of these webpack targets being used in live code or boilerplates.</p>
</blockquote>
<h1 id="the-manifest">The Manifest<a href="#the-manifest" aria-hidden="true"><span class="icon icon-link"></span></a></h1>
<p>In a typical application or site built with webpack, there are three main types of code:</p>
<ol>
<li>The source code you, and maybe your team, have written.</li>
<li>Any third-party library or "vendor" code your source is dependent on.</li>
<li>A webpack runtime and <strong>manifest</strong> that conducts the interaction of all modules.</li>
</ol>
<p>This article will focus on the last of these three parts: the runtime and, in particular, the manifest.</p>
<h2 id="runtime">Runtime<a href="#runtime" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>The runtime, along with the manifest data, is basically all the code webpack needs to connect your modularized application while it's running in the browser. It contains the loading and resolving logic needed to connect your modules as they interact. This includes connecting modules that have already been loaded into the browser as well as logic to lazy-load the ones that haven't.</p>
<h2 id="manifest">Manifest<a href="#manifest" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Once your application hits the browser in the form of <code>index.html</code> file, some bundles and a variety of other assets required by your application must be loaded and linked somehow. That <code>/src</code> directory you meticulously laid out is now bundled, minified and maybe even split into smaller chunks for lazy-loading by webpack's <a href="/configuration/optimization/"><code>optimization</code></a>. So how does webpack manage the interaction between all of your required modules? This is where the manifest data comes in...</p>
<p>As the compiler enters, resolves, and maps out your application, it keeps detailed notes on all your modules. This collection of data is called the "Manifest," and it's what the runtime will use to resolve and load modules once they've been bundled and shipped to the browser. No matter which <a href="/api/module-methods">module syntax</a> you have chosen, those <code>import</code> or <code>require</code> statements have now become <code>__webpack_require__</code> methods that point to module identifiers. Using the data in the manifest, the runtime will be able to find out where to retrieve the modules behind the identifiers.</p>
<h2 id="the-problem">The Problem<a href="#the-problem" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>So now you have a little bit of insight about how webpack works behind the scenes. "But, how does this affect me?", you might ask. The simple answer is that most of the time it doesn't. The runtime will do its thing, utilizing the manifest, and everything will appear to just magically work once your application hits the browser. However, if you decide to improve the performance of your projects by utilizing browser caching, this process will all of a sudden become an important thing to understand.</p>
<p>By using content hashes within your bundle file names, you can indicate to the browser when the content of a file has changed, thus invalidating the cache. Once you start doing this though, you'll immediately notice some funny behavior. Certain hashes change even when their content apparently does not. This is caused by the injection of the runtime and manifest, which changes every build.</p>
<p>See <a href="/guides/output-management/#the-manifest">the manifest section</a> of our <em>Output management</em> guide to learn how to extract the manifest, and read the guides below to learn more about the intricacies of long term caching.</p>
<h1 id="hot-module-replacement">Hot Module Replacement<a href="#hot-module-replacement" aria-hidden="true"><span class="icon icon-link"></span></a></h1>
<p>Hot Module Replacement (HMR) exchanges, adds, or removes <a href="/concepts/modules/">modules</a> while an application is running, without a full reload. This can significantly speed up development in a few ways:</p>
<ul>
<li>Retain application state which is lost during a full reload.</li>
<li>Save valuable development time by only updating what's changed.</li>
<li>Instantly update the browser when modifications are made to CSS/JS in the source code, which is almost comparable to changing styles directly in the browser's dev tools.</li>
</ul>
<h2 id="how-it-works">How It Works<a href="#how-it-works" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>Let's go through some different viewpoints to understand exactly how HMR works...</p>
<h3 id="in-the-application">In the Application<a href="#in-the-application" aria-hidden="true"><span class="icon icon-link"></span></a></h3>
<p>The following steps allow modules to be swapped in and out of an application:</p>
<ol>
<li>The application asks the HMR runtime to check for updates.</li>
<li>The runtime asynchronously downloads the updates and notifies the application.</li>
<li>The application then asks the runtime to apply the updates.</li>
<li>The runtime synchronously applies the updates.</li>
</ol>
<p>You can set up HMR so that this process happens automatically, or you can choose to require user interaction for updates to occur.</p>
<h3 id="in-the-compiler">In the Compiler<a href="#in-the-compiler" aria-hidden="true"><span class="icon icon-link"></span></a></h3>
<p>In addition to normal assets, the compiler needs to emit an "update" to allow updating from the previous version to the new version. The "update" consists of two parts:</p>
<ol>
<li>The updated <a href="/concepts/manifest">manifest</a> (JSON)</li>
<li>One or more updated chunks (JavaScript)</li>
</ol>
<p>The manifest contains the new compilation hash and a list of all updated chunks. Each of these chunks contains the new code for all updated modules (or a flag indicating that the module was removed).</p>
<p>The compiler ensures that module IDs and chunk IDs are consistent between these builds. It typically stores these IDs in memory (e.g. with <a href="/configuration/dev-server/">webpack-dev-server</a>), but it's also possible to store them in a JSON file.</p>
<h3 id="in-a-module">In a Module<a href="#in-a-module" aria-hidden="true"><span class="icon icon-link"></span></a></h3>
<p>HMR is an opt-in feature that only affects modules containing HMR code. One example would be patching styling through the <a href="https://github.com/webpack-contrib/style-loader"><code>style-loader</code></a>. In order for patching to work, the <code>style-loader</code> implements the HMR interface; when it receives an update through HMR, it replaces the old styles with the new ones.</p>
<p>Similarly, when implementing the HMR interface in a module, you can describe what should happen when the module is updated. However, in most cases, it's not mandatory to write HMR code in every module. If a module has no HMR handlers, the update bubbles up. This means that a single handler can update a complete module tree. If a single module from the tree is updated, the entire set of dependencies is reloaded.</p>
<p>See the <a href="/api/hot-module-replacement">HMR API page</a> for details on the <code>module.hot</code> interface.</p>
<h3 id="in-the-runtime">In the Runtime<a href="#in-the-runtime" aria-hidden="true"><span class="icon icon-link"></span></a></h3>
<p>Here things get a bit more technical... if you're not interested in the internals, feel free to jump to the <a href="/api/hot-module-replacement">HMR API page</a> or <a href="/guides/hot-module-replacement">HMR guide</a>.</p>
<p>For the module system runtime, additional code is emitted to track module <code>parents</code> and <code>children</code>. On the management side, the runtime supports two methods: <code>check</code> and <code>apply</code>.</p>
<p>A <code>check</code> makes an HTTP request to the update manifest. If this request fails, there is no update available. If it succeeds, the list of updated chunks is compared to the list of currently loaded chunks. For each loaded chunk, the corresponding update chunk is downloaded. All module updates are stored in the runtime. When all update chunks have been downloaded and are ready to be applied, the runtime switches into the <code>ready</code> state.</p>
<p>The <code>apply</code> method flags all updated modules as invalid. For each invalid module, there needs to be an update handler in the module or in its parent(s). Otherwise, the invalid flag bubbles up and invalidates parent(s) as well. Each bubble continues until the app's entry point or a module with an update handler is reached (whichever comes first). If it bubbles up from an entry point, the process fails.</p>
<p>Afterwards, all invalid modules are disposed (via the dispose handler) and unloaded. The current hash is then updated and all <code>accept</code> handlers are called. The runtime switches back to the <code>idle</code> state and everything continues as normal.</p>
<h2 id="get-started">Get Started<a href="#get-started" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>HMR can be used in development as a LiveReload replacement. <a href="/configuration/dev-server/">webpack-dev-server</a> supports a <code>hot</code> mode in which it tries to update with HMR before trying to reload the whole page. See the <a href="/guides/hot-module-replacement">Hot Module Replacement guide</a> for details.</p>
<blockquote class="tip">
<p>As with many other features, webpack's power lies in its customizability. There are <em>many</em> ways of configuring HMR depending on the needs of a particular project. However, for most purposes, <code>webpack-dev-server</code> is a good fit and will allow you to get started with HMR quickly.</p>
</blockquote>
<h1 id="why-webpack">Why webpack<a href="#why-webpack" aria-hidden="true"><span class="icon icon-link"></span></a></h1>
<p>To understand why you should use webpack, let's recap how we used JavaScript on the web before bundlers were a thing.</p>
<p>There are two ways to run JavaScript in a browser. First, include a script for each functionality; this solution is hard to scale because loading too many scripts can cause a network bottleneck. The second option is to use a big <code>.js</code> file containing all your project code, but this leads to problems in scope, size, readability and maintainability.</p>
<h2 id="iifes---immediately-invoked-function-expressions">IIFE's - Immediately invoked function expressions<a href="#iifes---immediately-invoked-function-expressions" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>IIFEs solve scoping issues for large projects; when script files are wrapped by an IIFE, you can safely concatenate or safely combine files without worrying about scope collision.</p>
<p>The use of IIFEs led to tools like Make, Gulp, Grunt, Broccoli or Brunch. These tools are known as task runners, and they concatenate all your project files together.</p>
<p>However, changing one file means you have to rebuild the whole thing. Concatenating makes it easy to reuse scripts across files but makes build optimizations more difficult. How can you find out if code is actually being used or not?</p>
<p>Even if you only use a single function from lodash, you have to add the entire library and then squish it together. How do you treeshake the dependencies on your code? Lazy loading chunks of code can be hard to do at scale and requires a lot of manual work from the developer.</p>
<h2 id="birth-of-javascript-modules-happened-thanks-to-nodejs">Birth of JavaScript Modules happened thanks to Node.js<a href="#birth-of-javascript-modules-happened-thanks-to-nodejs" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>webpack runs on Node.js, a JavaScript runtime that can be used in computers and servers outside a browser environment.</p>
<p>When Node.js was released a new era started, and it came with new challenges. Now that JavaScript is not running in a browser, how are Node applications supposed to load new chunks of code? There are no html files and script tags that can be added to it.</p>
<p>CommonJS came out and introduced <code>require</code>, which allows you to load and use a module in the current file. This solved scope issues out of the box by importing each module as it was needed.</p>
<h2 id="npm--nodejs--modules----mass-distribution">npm + Node.js + modules -- mass distribution<a href="#npm--nodejs--modules----mass-distribution" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>JavaScript is taking over the world as a language, as a platform and as a way to rapidly develop and create fast applications.</p>
<p>But there is no browser support for CommonJS. There are no <a href="https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358">live bindings</a>. There are problems with circular references. Synchronous module resolution and loading is slow. While CommonJS was a great solution for Node.js projects, browsers didn't support modules, so bundlers and tools like Browserify, RequireJS and SystemJS were created, allowing us to write CommonJS modules that run in a browser.</p>
<h2 id="esm---ecmascript-modules">ESM - ECMAScript Modules<a href="#esm---ecmascript-modules" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>The good news for web projects is that modules are becoming an official feature in the ECMAScript standard. However, browser support is incomplete and bundling is still faster and currently recommended over these early module implementations.</p>
<h2 id="wouldnt-it-be-nice">Wouldn't it be nice…<a href="#wouldnt-it-be-nice" aria-hidden="true"><span class="icon icon-link"></span></a></h2>
<p>...to have something that will not only let us write modules but also support any module format (at least until we get to ESM) and handle resources and assets at the same time?</p>
<p>This is why webpack exists. It's a tool that lets you bundle your JavaScript applications (supporting both ESM and CommonJS), and it can be extended to support many different assets such as images, fonts and stylesheets.</p>
<p>webpack cares about performance and load times; it's always improving or adding new features, such as async chunk loading and prefetching, to deliver the best possible experience for your project and your users.</p>
</div><div class="contributors__section"><hr/><h3>Contributors</h3><div class="contributors"><div class="contributors__list"><a class="contributor" href="https://github.com/webpack"><img alt="webpack" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->webpack</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>
window.matchMedia('print').addListener(function(mql) {
if (!mql.matches) {
window.close();
}
});
window.print();
</script></body></html>