-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
56 lines (54 loc) · 34.5 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
<!DOCTYPE html><html lang="en" data-reactroot=""><head><meta charset="utf-8"/><meta name="theme-color" content="#2B3A42"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Targets | 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="Targets | 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/targets/"/><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 sidebar-item--open "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/targets/">Targets</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Usage"><a href="/concepts/targets/#usage">Usage</a></li><li class="sidebar-item__anchor" title="Multiple Targets"><a href="/concepts/targets/#multiple-targets">Multiple Targets</a></li><li class="sidebar-item__anchor" title="Resources"><a href="/concepts/targets/#resources">Resources</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/manifest/">The Manifest</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Runtime"><a href="/concepts/manifest/#runtime">Runtime</a></li><li class="sidebar-item__anchor" title="Manifest"><a href="/concepts/manifest/#manifest">Manifest</a></li><li class="sidebar-item__anchor" title="The Problem"><a href="/concepts/manifest/#the-problem">The Problem</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/hot-module-replacement/">Hot Module Replacement</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="How It Works"><a href="/concepts/hot-module-replacement/#how-it-works">How It Works</a></li><li class="sidebar-item__anchor" title="In the Application"><a href="/concepts/hot-module-replacement/#in-the-application">In the Application</a></li><li class="sidebar-item__anchor" title="In the Compiler"><a href="/concepts/hot-module-replacement/#in-the-compiler">In the Compiler</a></li><li class="sidebar-item__anchor" title="In a Module"><a href="/concepts/hot-module-replacement/#in-a-module">In a Module</a></li><li class="sidebar-item__anchor" title="In the Runtime"><a href="/concepts/hot-module-replacement/#in-the-runtime">In the Runtime</a></li><li class="sidebar-item__anchor" title="Get Started"><a href="/concepts/hot-module-replacement/#get-started">Get Started</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/why-webpack/">Why webpack</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="IIFE's - Immediately invoked function expressions"><a href="/concepts/why-webpack/#iifes---immediately-invoked-function-expressions">IIFE's - Immediately invoked function expressions</a></li><li class="sidebar-item__anchor" title="Birth of JavaScript Modules happened thanks to Node.js"><a href="/concepts/why-webpack/#birth-of-javascript-modules-happened-thanks-to-nodejs">Birth of JavaScript Modules happened thanks to Node.js</a></li><li class="sidebar-item__anchor" title="npm + Node.js + modules -- mass distribution"><a href="/concepts/why-webpack/#npm--nodejs--modules----mass-distribution">npm + Node.js + modules -- mass distribution</a></li><li class="sidebar-item__anchor" title="ESM - ECMAScript Modules"><a href="/concepts/why-webpack/#esm---ecmascript-modules">ESM - ECMAScript Modules</a></li><li class="sidebar-item__anchor" title="Wouldn't it be nice…"><a href="/concepts/why-webpack/#wouldnt-it-be-nice">Wouldn't it be nice…</a></li></ul></div></div><div><div class="sidebar-item "><i class="sidebar-item__toggle icon-chevron-right"></i><a class="sidebar-item__title" href="/concepts/printable/">Printable</a><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor" title="Concepts"><a href="/concepts/printable/#concepts">Concepts</a></li><li class="sidebar-item__anchor" title="Entry"><a href="/concepts/printable/#entry">Entry</a></li><li class="sidebar-item__anchor" title="Output"><a href="/concepts/printable/#output">Output</a></li><li class="sidebar-item__anchor" title="Loaders"><a href="/concepts/printable/#loaders">Loaders</a></li><li class="sidebar-item__anchor" title="Plugins"><a href="/concepts/printable/#plugins">Plugins</a></li><li class="sidebar-item__anchor" title="Mode"><a href="/concepts/printable/#mode">Mode</a></li><li class="sidebar-item__anchor" title="Browser Compatibility"><a href="/concepts/printable/#browser-compatibility">Browser Compatibility</a></li><li class="sidebar-item__anchor" title="Entry Points"><a href="/concepts/printable/#entry-points">Entry Points</a></li><li class="sidebar-item__anchor" title="Single Entry (Shorthand) Syntax"><a href="/concepts/printable/#single-entry-shorthand-syntax">Single Entry (Shorthand) Syntax</a></li><li class="sidebar-item__anchor" title="Object Syntax"><a href="/concepts/printable/#object-syntax">Object Syntax</a></li><li class="sidebar-item__anchor" title="Scenarios"><a href="/concepts/printable/#scenarios">Scenarios</a></li><li class="sidebar-item__anchor" title="Separate App and Vendor Entries"><a href="/concepts/printable/#separate-app-and-vendor-entries">Separate App and Vendor Entries</a></li><li class="sidebar-item__anchor" title="Multi Page Application"><a href="/concepts/printable/#multi-page-application">Multi Page Application</a></li><li class="sidebar-item__anchor" title="Output"><a href="/concepts/printable/#output-1">Output</a></li><li class="sidebar-item__anchor" title="Usage"><a href="/concepts/printable/#usage">Usage</a></li><li class="sidebar-item__anchor" title="Multiple Entry Points"><a href="/concepts/printable/#multiple-entry-points">Multiple Entry Points</a></li><li class="sidebar-item__anchor" title="Advanced"><a href="/concepts/printable/#advanced">Advanced</a></li><li class="sidebar-item__anchor" title="Loaders"><a href="/concepts/printable/#loaders-1">Loaders</a></li><li class="sidebar-item__anchor" title="Example"><a href="/concepts/printable/#example">Example</a></li><li class="sidebar-item__anchor" title="Using Loaders"><a href="/concepts/printable/#using-loaders">Using Loaders</a></li><li class="sidebar-item__anchor" title="Configuration"><a href="/concepts/printable/#configuration">Configuration</a></li><li class="sidebar-item__anchor" title="Inline"><a href="/concepts/printable/#inline">Inline</a></li><li class="sidebar-item__anchor" title="CLI"><a href="/concepts/printable/#cli">CLI</a></li><li class="sidebar-item__anchor" title="Loader Features"><a href="/concepts/printable/#loader-features">Loader Features</a></li><li class="sidebar-item__anchor" title="Resolving Loaders"><a href="/concepts/printable/#resolving-loaders">Resolving Loaders</a></li><li class="sidebar-item__anchor" title="Plugins"><a href="/concepts/printable/#plugins-1">Plugins</a></li><li class="sidebar-item__anchor" title="Anatomy"><a href="/concepts/printable/#anatomy">Anatomy</a></li><li class="sidebar-item__anchor" title="Usage"><a href="/concepts/printable/#usage-1">Usage</a></li><li class="sidebar-item__anchor" title="Configuration"><a href="/concepts/printable/#configuration-1">Configuration</a></li><li class="sidebar-item__anchor" title="Node API"><a href="/concepts/printable/#node-api">Node API</a></li><li class="sidebar-item__anchor" title="Configuration"><a href="/concepts/printable/#configuration-2">Configuration</a></li><li class="sidebar-item__anchor" title="Simple Configuration"><a href="/concepts/printable/#simple-configuration">Simple Configuration</a></li><li class="sidebar-item__anchor" title="Multiple Targets"><a href="/concepts/printable/#multiple-targets">Multiple Targets</a></li><li class="sidebar-item__anchor" title="Using other Configuration Languages"><a href="/concepts/printable/#using-other-configuration-languages">Using other Configuration Languages</a></li><li class="sidebar-item__anchor" title="Modules"><a href="/concepts/printable/#modules">Modules</a></li><li class="sidebar-item__anchor" title="What is a webpack Module"><a href="/concepts/printable/#what-is-a-webpack-module">What is a webpack Module</a></li><li class="sidebar-item__anchor" title="Supported Module Types"><a href="/concepts/printable/#supported-module-types">Supported Module Types</a></li><li class="sidebar-item__anchor" title="Module Resolution"><a href="/concepts/printable/#module-resolution">Module Resolution</a></li><li class="sidebar-item__anchor" title="Resolving rules in webpack"><a href="/concepts/printable/#resolving-rules-in-webpack">Resolving rules in webpack</a></li><li class="sidebar-item__anchor" title="Absolute paths"><a href="/concepts/printable/#absolute-paths">Absolute paths</a></li><li class="sidebar-item__anchor" title="Relative paths"><a href="/concepts/printable/#relative-paths">Relative paths</a></li><li class="sidebar-item__anchor" title="Module paths"><a href="/concepts/printable/#module-paths">Module paths</a></li><li class="sidebar-item__anchor" title="Resolving Loaders"><a href="/concepts/printable/#resolving-loaders-1">Resolving Loaders</a></li><li class="sidebar-item__anchor" title="Caching"><a href="/concepts/printable/#caching">Caching</a></li><li class="sidebar-item__anchor" title="Dependency Graph"><a href="/concepts/printable/#dependency-graph">Dependency Graph</a></li><li class="sidebar-item__anchor" title="Targets"><a href="/concepts/printable/#targets">Targets</a></li><li class="sidebar-item__anchor" title="Usage"><a href="/concepts/printable/#usage-2">Usage</a></li><li class="sidebar-item__anchor" title="Multiple Targets"><a href="/concepts/printable/#multiple-targets-1">Multiple Targets</a></li><li class="sidebar-item__anchor" title="Resources"><a href="/concepts/printable/#resources">Resources</a></li><li class="sidebar-item__anchor" title="The Manifest"><a href="/concepts/printable/#the-manifest">The Manifest</a></li><li class="sidebar-item__anchor" title="Runtime"><a href="/concepts/printable/#runtime">Runtime</a></li><li class="sidebar-item__anchor" title="Manifest"><a href="/concepts/printable/#manifest">Manifest</a></li><li class="sidebar-item__anchor" title="The Problem"><a href="/concepts/printable/#the-problem">The Problem</a></li><li class="sidebar-item__anchor" title="Hot Module Replacement"><a href="/concepts/printable/#hot-module-replacement">Hot Module Replacement</a></li><li class="sidebar-item__anchor" title="How It Works"><a href="/concepts/printable/#how-it-works">How It Works</a></li><li class="sidebar-item__anchor" title="In the Application"><a href="/concepts/printable/#in-the-application">In the Application</a></li><li class="sidebar-item__anchor" title="In the Compiler"><a href="/concepts/printable/#in-the-compiler">In the Compiler</a></li><li class="sidebar-item__anchor" title="In a Module"><a href="/concepts/printable/#in-a-module">In a Module</a></li><li class="sidebar-item__anchor" title="In the Runtime"><a href="/concepts/printable/#in-the-runtime">In the Runtime</a></li><li class="sidebar-item__anchor" title="Get Started"><a href="/concepts/printable/#get-started">Get Started</a></li><li class="sidebar-item__anchor" title="Why webpack"><a href="/concepts/printable/#why-webpack">Why webpack</a></li><li class="sidebar-item__anchor" title="IIFE's - Immediately invoked function expressions"><a href="/concepts/printable/#iifes---immediately-invoked-function-expressions">IIFE's - Immediately invoked function expressions</a></li><li class="sidebar-item__anchor" title="Birth of JavaScript Modules happened thanks to Node.js"><a href="/concepts/printable/#birth-of-javascript-modules-happened-thanks-to-nodejs">Birth of JavaScript Modules happened thanks to Node.js</a></li><li class="sidebar-item__anchor" title="npm + Node.js + modules -- mass distribution"><a href="/concepts/printable/#npm--nodejs--modules----mass-distribution">npm + Node.js + modules -- mass distribution</a></li><li class="sidebar-item__anchor" title="ESM - ECMAScript Modules"><a href="/concepts/printable/#esm---ecmascript-modules">ESM - ECMAScript Modules</a></li><li class="sidebar-item__anchor" title="Wouldn't it be nice…"><a href="/concepts/printable/#wouldnt-it-be-nice">Wouldn't it be nice…</a></li></ul></div></div></div></nav><section class="page"><div class="page-links"><a class="page-links__link" href="https://github.com/webpack/webpack.js.org/edit/master/src/content/concepts/targets.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>Targets</h1><div><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">Usage<a href="#usage" 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">Multiple Targets<a href="#multiple-targets" 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>
</div><div class="contributors__section"><hr/><h3>Contributors</h3><div class="contributors"><div class="contributors__list"><a class="contributor" href="https://github.com/TheLarkInn"><img alt="TheLarkInn" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->TheLarkInn</span></a><a class="contributor" href="https://github.com/rouzbeh84"><img alt="rouzbeh84" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->rouzbeh84</span></a><a class="contributor" href="https://github.com/johnstew"><img alt="johnstew" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->johnstew</span></a><a class="contributor" href="https://github.com/srilman"><img alt="srilman" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->srilman</span></a><a class="contributor" href="https://github.com/byzyk"><img alt="byzyk" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->byzyk</span></a><a class="contributor" href="https://github.com/EugeneHlushko"><img alt="EugeneHlushko" src="/cb0093496837d3dc43dfae5a9104d663.png"/><span class="contributor__name"> <!-- -->EugeneHlushko</span></a></div></div></div></div></section><div class="gitter"><div class="gitter__button"><i class="gitter__icon icon-gitter"></i></div></div></div><footer class="footer"><div class="container footer__inner"><section class="footer__left"><a class="footer__link" href="/guides/getting-started/">Get Started</a><a class="footer__link" href="/organization/">Organization</a><a class="footer__link" href="/starter-kits/">Starter Kits</a><a class="footer__link" href="/comparison/">Comparison</a></section><section class="footer__middle"><a class="footer__icon" href="/"><img src="/d19378a95ebe6b15d5ddea281138dcf4.svg" alt="webpack icon"/></a></section><section class="footer__right"><a href="https://webpack.threadless.com/" target="_blank" rel="noopener" class="footer__link">Swag Store</a><a class="footer__link" href="/glossary/">Glossary</a><a class="footer__link" href="/branding/">Branding</a><a href="https://gitter.im/webpack/webpack" target="_blank" rel="noopener" class="footer__link">Gitter</a><a href="https://github.com/webpack/webpack/releases" target="_blank" rel="noopener" class="footer__link">Changelog</a><a class="footer__link footer__license" href="/license"><img alt="Creative Commons License" src="/7052446b5e67df4434f4031afd2f1497.svg"/><img alt="Creative Commons License" src="/7ebb1b3901ce119694f65e04f6347ef5.svg"/></a></section></div></footer></div></div><script src="/vendor.bundle.js"></script><script src="/index.bundle.js"></script></body></html>