-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy path10.2efdda510e80bebfcc09.chunk.js
1 lines (1 loc) · 46 KB
/
10.2efdda510e80bebfcc09.chunk.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{266:function(n,t,e){"use strict";e.r(t),t.default='<p>For proper usage and easy distribution of this configuration, webpack can be configured with <code>webpack.config.js</code>. Any parameters sent to the CLI will map to a corresponding parameter in the config file.</p>\n<p>Read the <a href="/guides/installation">installation guide</a> if you don\'t already have webpack and CLI installed.</p>\n<h2 id="usage-with-config-file">Usage with config file<a href="#usage-with-config-file" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<pre><code class="hljs language-bash">webpack <span class="token punctuation">[</span>--config webpack.config.js<span class="token punctuation">]</span></code></pre>\n<p>See <a href="/configuration">configuration</a> for the options in the configuration file.</p>\n<h2 id="usage-without-config-file">Usage without config file<a href="#usage-without-config-file" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<pre><code class="hljs language-sh">webpack <entry> [<entry>] -o <output>\n</code></pre>\n<p><strong><code><entry></code></strong></p>\n<p>A filename or a set of named filenames which act as the entry point to build your project. You can pass multiple entries (every entry is loaded on startup). If you pass a pair in the form <code><name>=<request></code>, you can create an additional entry point. It will be mapped to the configuration option <code>entry</code>.</p>\n<p><strong><code><output></code></strong></p>\n<p>A path and filename for the bundled file to be saved in. It will be mapped to the configuration options <code>output.path</code> and <code>output.filename</code>.</p>\n<p><strong>Example</strong></p>\n<p>If your project structure is as follows -</p>\n<pre><code class="hljs language-bash"><span class="token keyword">.</span>\n├── dist\n├── index.html\n└── src\n ├── index.js\n ├── index2.js\n └── others.js</code></pre>\n<pre><code class="hljs language-bash">webpack src/index.js -o dist/bundle.js</code></pre>\n<p>This will bundle your source code with entry as <code>index.js</code>, and the output bundle file will have a path of <code>dist</code>, and the filename will be <code>bundle.js</code></p>\n<pre><code class="hljs language-bash">\t<span class="token operator">|</span> Asset <span class="token operator">|</span> Size <span class="token operator">|</span> Chunks <span class="token operator">|</span> Chunk Names <span class="token operator">|</span>\n\t<span class="token operator">|</span>-----------<span class="token operator">|</span>---------<span class="token operator">|</span>-------------<span class="token operator">|</span>-------------<span class="token operator">|</span>\n\t<span class="token operator">|</span> bundle.js <span class="token operator">|</span> 1.54 kB <span class="token operator">|</span> 0 <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> <span class="token operator">|</span> index <span class="token operator">|</span>\n\t<span class="token punctuation">[</span>0<span class="token punctuation">]</span> ./src/index.js 51 bytes <span class="token punctuation">{</span>0<span class="token punctuation">}</span> <span class="token punctuation">[</span>built<span class="token punctuation">]</span>\n\t<span class="token punctuation">[</span>1<span class="token punctuation">]</span> ./src/others.js 29 bytes <span class="token punctuation">{</span>0<span class="token punctuation">}</span> <span class="token punctuation">[</span>built<span class="token punctuation">]</span></code></pre>\n<pre><code class="hljs language-bash">webpack index<span class="token operator">=</span>./src/index.js entry2<span class="token operator">=</span>./src/index2.js -o dist/bundle.js</code></pre>\n<p>This will form the bundle with both the files as separate entry points.</p>\n<pre><code class="hljs language-bash">\t<span class="token operator">|</span> Asset <span class="token operator">|</span> Size <span class="token operator">|</span> Chunks <span class="token operator">|</span> Chunk Names <span class="token operator">|</span>\n\t<span class="token operator">|</span>-----------<span class="token operator">|</span>---------<span class="token operator">|</span>---------------<span class="token operator">|</span>---------------<span class="token operator">|</span>\n\t<span class="token operator">|</span> bundle.js <span class="token operator">|</span> 1.55 kB <span class="token operator">|</span> 0,1 <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> <span class="token operator">|</span> index, entry2 <span class="token operator">|</span>\n\t<span class="token punctuation">[</span>0<span class="token punctuation">]</span> ./src/index.js 51 bytes <span class="token punctuation">{</span>0<span class="token punctuation">}</span> <span class="token punctuation">[</span>built<span class="token punctuation">]</span>\n\t<span class="token punctuation">[</span>0<span class="token punctuation">]</span> ./src/index2.js 54 bytes <span class="token punctuation">{</span>1<span class="token punctuation">}</span> <span class="token punctuation">[</span>built<span class="token punctuation">]</span>\n\t<span class="token punctuation">[</span>1<span class="token punctuation">]</span> ./src/others.js 29 bytes <span class="token punctuation">{</span>0<span class="token punctuation">}</span> <span class="token punctuation">{</span>1<span class="token punctuation">}</span> <span class="token punctuation">[</span>built<span class="token punctuation">]</span></code></pre>\n<h3 id="common-options">Common Options<a href="#common-options" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<blockquote class="warning">\n<p>Note that Command Line Interface has a higher precedence for the arguments you use it with than your configuration file. For instance, if you pass <a href="/configuration/mode/#usage"><code>--mode="production"</code></a> to webpack CLI and your configuration file uses <code>development</code>, <code>production</code> will be used.</p>\n</blockquote>\n<p><strong>List all of the options available on the cli</strong></p>\n<pre><code class="hljs language-bash">webpack --help\nwebpack -h</code></pre>\n<p><strong>Build source using a config file</strong></p>\n<p>Specifies a different <a href="/configuration">configuration</a> file to pick up. Use this if you want to specify something different from <code>webpack.config.js</code>, which is the default.</p>\n<pre><code class="hljs language-bash">webpack --config example.config.js</code></pre>\n<p><strong>Print result of webpack as a JSON</strong></p>\n<pre><code class="hljs language-bash">webpack --json\nwebpack --json <span class="token operator">></span> stats.json</code></pre>\n<p>In every other case, webpack prints out a set of stats showing bundle, chunk and timing details. Using this option, the output can be a JSON object. This response is accepted by webpack\'s <a href="https://webpack.github.io/analyse/">analyse tool</a>, or chrisbateman\'s <a href="https://chrisbateman.github.io/webpack-visualizer/">webpack-visualizer</a>, or th0r\'s <a href="https://github.com/webpack-contrib/webpack-bundle-analyzer">webpack-bundle-analyzer</a>. The analyse tool will take in the JSON and provide all the details of the build in graphical form.</p>\n<h3 id="environment-options">Environment Options<a href="#environment-options" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>When the webpack configuration <a href="/configuration/configuration-types/#exporting-a-function">exports a function</a>, an "environment" may be passed to it.</p>\n<pre><code class="hljs language-bash">webpack --env.production <span class="token comment"># sets env.production == true</span>\nwebpack --env.platform<span class="token operator">=</span>web <span class="token comment"># sets env.platform == "web"</span></code></pre>\n<p>The <code>--env</code> argument accepts various syntaxes:</p>\n<table>\n<thead>\n<tr>\n<th>Invocation</th>\n<th>Resulting environment</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><div class="title"><p>Invocation</p><p>Resulting environment</p></div>\n<div class="content"><p><code>webpack --env prod</code><p class="description mobile"><code>"prod"</code></p></p></div></td>\n<td class="description desktop"><code>"prod"</code></td>\n</tr>\n<tr>\n<td><div class="title"><p>Invocation</p><p>Resulting environment</p></div>\n<div class="content"><p><code>webpack --env.prod</code><p class="description mobile"><code>{ prod: true }</code></p></p></div></td>\n<td class="description desktop"><code>{ prod: true }</code></td>\n</tr>\n<tr>\n<td><div class="title"><p>Invocation</p><p>Resulting environment</p></div>\n<div class="content"><p><code>webpack --env.prod=1</code><p class="description mobile"><code>{ prod: 1 }</code></p></p></div></td>\n<td class="description desktop"><code>{ prod: 1 }</code></td>\n</tr>\n<tr>\n<td><div class="title"><p>Invocation</p><p>Resulting environment</p></div>\n<div class="content"><p><code>webpack --env.prod=foo</code><p class="description mobile"><code>{ prod: "foo" }</code></p></p></div></td>\n<td class="description desktop"><code>{ prod: "foo" }</code></td>\n</tr>\n<tr>\n<td><div class="title"><p>Invocation</p><p>Resulting environment</p></div>\n<div class="content"><p><code>webpack --env.prod --env.min</code><p class="description mobile"><code>{ prod: true, min: true }</code></p></p></div></td>\n<td class="description desktop"><code>{ prod: true, min: true }</code></td>\n</tr>\n<tr>\n<td><div class="title"><p>Invocation</p><p>Resulting environment</p></div>\n<div class="content"><p><code>webpack --env.prod --env min</code><p class="description mobile"><code>[{ prod: true }, "min"]</code></p></p></div></td>\n<td class="description desktop"><code>[{ prod: true }, "min"]</code></td>\n</tr>\n<tr>\n<td><div class="title"><p>Invocation</p><p>Resulting environment</p></div>\n<div class="content"><p><code>webpack --env.prod=foo --env.prod=bar</code><p class="description mobile"><code>{prod: [ "foo", "bar" ]}</code></p></p></div></td>\n<td class="description desktop"><code>{prod: [ "foo", "bar" ]}</code></td>\n</tr>\n</tbody>\n</table>\n<blockquote class="tip">\n<p>See the <a href="/guides/environment-variables">environment variables</a> guide for more information on its usage.</p>\n</blockquote>\n<h3 id="config-options">Config Options<a href="#config-options" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<table>\n<thead>\n<tr>\n<th>Parameter</th>\n<th>Explanation</th>\n<th>Input type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default</p></div>\n<div class="content"><p><code>--config</code><p class="description mobile">Path to the config file</p></p></div></td>\n<td class="description desktop">Path to the config file</td>\n<td>string</td>\n<td>webpack.config.js or webpackfile.js</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default</p></div>\n<div class="content"><p><code>--config-register, -r</code><p class="description mobile">Preload one or more modules before loading the webpack configuration</p></p></div></td>\n<td class="description desktop">Preload one or more modules before loading the webpack configuration</td>\n<td>array</td>\n<td></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default</p></div>\n<div class="content"><p><code>--config-name</code><p class="description mobile">Name of the config to use</p></p></div></td>\n<td class="description desktop">Name of the config to use</td>\n<td>string</td>\n<td></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default</p></div>\n<div class="content"><p><code>--env</code><p class="description mobile">Environment passed to the config, when it is a function</p></p></div></td>\n<td class="description desktop">Environment passed to the config, when it is a function</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default</p></div>\n<div class="content"><p><code>--mode</code><p class="description mobile">Mode to use, either "development" or "production"</p></p></div></td>\n<td class="description desktop">Mode to use, either "development" or "production"</td>\n<td>string</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id="output-options">Output Options<a href="#output-options" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>This set of options allows you to manipulate certain <a href="/configuration/output">output</a> parameters of your build.</p>\n<table>\n<thead>\n<tr>\n<th>Parameter</th>\n<th>Explanation</th>\n<th>Input type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default</p></div>\n<div class="content"><p><code>--output-chunk-filename</code><p class="description mobile">The output filename for additional chunks</p></p></div></td>\n<td class="description desktop">The output filename for additional chunks</td>\n<td>string</td>\n<td>filename with \n[\nid\n]\n instead of \n[\nname\n]\n or \n[\nid\n]\n prefixed</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default</p></div>\n<div class="content"><p><code>--output-filename</code><p class="description mobile">The output filename of the bundle</p></p></div></td>\n<td class="description desktop">The output filename of the bundle</td>\n<td>string</td>\n<td>[\nname\n]\n.js</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default</p></div>\n<div class="content"><p><code>--output-jsonp-function</code><p class="description mobile">The name of the JSONP function used for chunk loading</p></p></div></td>\n<td class="description desktop">The name of the JSONP function used for chunk loading</td>\n<td>string</td>\n<td>webpackJsonp</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default</p></div>\n<div class="content"><p><code>--output-library</code><p class="description mobile">Expose the exports of the entry point as library</p></p></div></td>\n<td class="description desktop">Expose the exports of the entry point as library</td>\n<td>string</td>\n<td></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default</p></div>\n<div class="content"><p><code>--output-library-target</code><p class="description mobile">The type for exposing the exports of the entry point as library</p></p></div></td>\n<td class="description desktop">The type for exposing the exports of the entry point as library</td>\n<td>string</td>\n<td>var</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default</p></div>\n<div class="content"><p><code>--output-path</code><p class="description mobile">The output path for compilation assets</p></p></div></td>\n<td class="description desktop">The output path for compilation assets</td>\n<td>string</td>\n<td>Current directory</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default</p></div>\n<div class="content"><p><code>--output-pathinfo</code><p class="description mobile">Include a comment with the request for every dependency</p></p></div></td>\n<td class="description desktop">Include a comment with the request for every dependency</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default</p></div>\n<div class="content"><p><code>--output-public-path</code><p class="description mobile">The public path for the assets</p></p></div></td>\n<td class="description desktop">The public path for the assets</td>\n<td>string</td>\n<td>/</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default</p></div>\n<div class="content"><p><code>--output-source-map-filename</code><p class="description mobile">The output filename for the SourceMap</p></p></div></td>\n<td class="description desktop">The output filename for the SourceMap</td>\n<td>string</td>\n<td>[\nname\n]\n.map or \n[\noutputFilename\n]\n.map</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default</p></div>\n<div class="content"><p><code>--build-delimiter</code><p class="description mobile">Display custom text after build output</p></p></div></td>\n<td class="description desktop">Display custom text after build output</td>\n<td>string</td>\n<td>Default string is null. You could provide a string such as \n<code>=== Build done ===</code></td>\n</tr>\n</tbody>\n</table>\n<h4 id="example-usage">Example Usage<a href="#example-usage" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<pre><code class="hljs language-bash">webpack index<span class="token operator">=</span>./src/index.js index2<span class="token operator">=</span>./src/index2.js --output-path<span class="token operator">=</span><span class="token string">\'./dist\'</span> --output-filename<span class="token operator">=</span><span class="token string">\'[name][hash].bundle.js\'</span>\n\n<span class="token operator">|</span> Asset <span class="token operator">|</span> Size <span class="token operator">|</span> Chunks <span class="token operator">|</span> Chunk Names <span class="token operator">|</span>\n<span class="token operator">|</span>--------------------------------------<span class="token operator">|</span>---------<span class="token operator">|</span>-------------<span class="token operator">|</span>---------------<span class="token operator">|</span>\n<span class="token operator">|</span> index2740fdca26e9348bedbec.bundle.js <span class="token operator">|</span> 2.6 kB <span class="token operator">|</span> 0 <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> <span class="token operator">|</span> index2 <span class="token operator">|</span>\n<span class="token operator">|</span> index740fdca26e9348bedbec.bundle.js <span class="token operator">|</span> 2.59 kB <span class="token operator">|</span> 1 <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> <span class="token operator">|</span> index <span class="token operator">|</span>\n\t<span class="token punctuation">[</span>0<span class="token punctuation">]</span> ./src/others.js 29 bytes <span class="token punctuation">{</span>0<span class="token punctuation">}</span> <span class="token punctuation">{</span>1<span class="token punctuation">}</span> <span class="token punctuation">[</span>built<span class="token punctuation">]</span>\n\t<span class="token punctuation">[</span>1<span class="token punctuation">]</span> ./src/index.js 51 bytes <span class="token punctuation">{</span>1<span class="token punctuation">}</span> <span class="token punctuation">[</span>built<span class="token punctuation">]</span>\n\t<span class="token punctuation">[</span>2<span class="token punctuation">]</span> ./src/index2.js 54 bytes <span class="token punctuation">{</span>0<span class="token punctuation">}</span> <span class="token punctuation">[</span>built<span class="token punctuation">]</span></code></pre>\n<pre><code class="hljs language-bash">webpack.js index<span class="token operator">=</span>./src/index.js index2<span class="token operator">=</span>./src/index2.js --output-path<span class="token operator">=</span><span class="token string">\'./dist\'</span> --output-filename<span class="token operator">=</span><span class="token string">\'[name][hash].bundle.js\'</span> --devtool source-map --output-source-map-filename<span class="token operator">=</span><span class="token string">\'[name]123.map\'</span>\n\n<span class="token operator">|</span> Asset <span class="token operator">|</span> Size <span class="token operator">|</span> Chunks <span class="token operator">|</span> Chunk Names <span class="token operator">|</span>\n<span class="token operator">|</span>--------------------------------------<span class="token operator">|</span>---------<span class="token operator">|</span>-------------<span class="token operator">|</span>---------------<span class="token operator">|</span>\n<span class="token operator">|</span> index2740fdca26e9348bedbec.bundle.js <span class="token operator">|</span> 2.76 kB <span class="token operator">|</span> 0 <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> <span class="token operator">|</span> index2 <span class="token operator">|</span>\n<span class="token operator">|</span> index740fdca26e9348bedbec.bundle.js <span class="token operator">|</span> 2.74 kB <span class="token operator">|</span> 1 <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> <span class="token operator">|</span> index <span class="token operator">|</span>\n<span class="token operator">|</span> index2123.map <span class="token operator">|</span> 2.95 kB <span class="token operator">|</span> 0 <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> <span class="token operator">|</span> index2 <span class="token operator">|</span>\n<span class="token operator">|</span> index123.map <span class="token operator">|</span> 2.95 kB <span class="token operator">|</span> 1 <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> <span class="token operator">|</span> index <span class="token operator">|</span>\n\t<span class="token punctuation">[</span>0<span class="token punctuation">]</span> ./src/others.js 29 bytes <span class="token punctuation">{</span>0<span class="token punctuation">}</span> <span class="token punctuation">{</span>1<span class="token punctuation">}</span> <span class="token punctuation">[</span>built<span class="token punctuation">]</span>\n\t<span class="token punctuation">[</span>1<span class="token punctuation">]</span> ./src/index.js 51 bytes <span class="token punctuation">{</span>1<span class="token punctuation">}</span> <span class="token punctuation">[</span>built<span class="token punctuation">]</span>\n\t<span class="token punctuation">[</span>2<span class="token punctuation">]</span> ./src/index2.js 54 bytes <span class="token punctuation">{</span>0<span class="token punctuation">}</span> <span class="token punctuation">[</span>built<span class="token punctuation">]</span></code></pre>\n<h3 id="debug-options">Debug Options<a href="#debug-options" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>This set of options allows you to better debug the application containing assets compiled with webpack</p>\n<table>\n<thead>\n<tr>\n<th>Parameter</th>\n<th>Explanation</th>\n<th>Input type</th>\n<th>Default value</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default value</p></div>\n<div class="content"><p><code>--debug</code><p class="description mobile">Switch loaders to debug mode</p></p></div></td>\n<td class="description desktop">Switch loaders to debug mode</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default value</p></div>\n<div class="content"><p><code>--devtool</code><p class="description mobile">Define <a href="/configuration/devtool/">source map type</a> for the bundled resources</p></p></div></td>\n<td class="description desktop">Define \n<a href="/configuration/devtool/">source map type</a>\n for the bundled resources</td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default value</p></div>\n<div class="content"><p><code>--progress</code><p class="description mobile">Print compilation progress in percentage</p></p></div></td>\n<td class="description desktop">Print compilation progress in percentage</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Input type</p><p>Default value</p></div>\n<div class="content"><p><code>--display-error-details</code><p class="description mobile">Display details about errors</p></p></div></td>\n<td class="description desktop">Display details about errors</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n</tbody>\n</table>\n<h3 id="module-options">Module Options<a href="#module-options" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>These options allow you to bind <a href="/configuration/module/">modules</a> as allowed by webpack</p>\n<table>\n<thead>\n<tr>\n<th>Parameter</th>\n<th>Explanation</th>\n<th>Usage</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Usage</p></div>\n<div class="content"><p><code>--module-bind</code><p class="description mobile">Bind a file extension to a loader</p></p></div></td>\n<td class="description desktop">Bind a file extension to a loader</td>\n<td><code>--module-bind js=babel-loader</code></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Usage</p></div>\n<div class="content"><p><code>--module-bind-post</code><p class="description mobile">Bind a file extension to a post loader</p></p></div></td>\n<td class="description desktop">Bind a file extension to a post loader</td>\n<td></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Usage</p></div>\n<div class="content"><p><code>--module-bind-pre</code><p class="description mobile">Bind a file extension to a pre loader</p></p></div></td>\n<td class="description desktop">Bind a file extension to a pre loader</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id="watch-options">Watch Options<a href="#watch-options" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>These options make the build <a href="/configuration/watch/">watch</a> for changes in files of the dependency graph and perform the build again.</p>\n<table>\n<thead>\n<tr>\n<th>Parameter</th>\n<th>Explanation</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p></div>\n<div class="content"><p><code>--watch</code>, <code>-w</code><p class="description mobile">Watch the filesystem for changes</p></p></div></td>\n<td class="description desktop">Watch the filesystem for changes</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p></div>\n<div class="content"><p><code>--watch-aggregate-timeout</code><p class="description mobile">Timeout for gathering changes while watching</p></p></div></td>\n<td class="description desktop">Timeout for gathering changes while watching</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p></div>\n<div class="content"><p><code>--watch-poll</code><p class="description mobile">The polling interval for watching (also enable polling)</p></p></div></td>\n<td class="description desktop">The polling interval for watching (also enable polling)</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p></div>\n<div class="content"><p><code>--watch-stdin</code>, <code>--stdin</code><p class="description mobile">Exit the process when stdin is closed</p></p></div></td>\n<td class="description desktop">Exit the process when stdin is closed</td>\n</tr>\n</tbody>\n</table>\n<h3 id="optimize-options">Optimize Options<a href="#optimize-options" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>These options allow you to manipulate optimizations for a production build using webpack</p>\n<table>\n<thead>\n<tr>\n<th>Parameter</th>\n<th>Explanation</th>\n<th>Plugin Used</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Plugin Used</p></div>\n<div class="content"><p><code>--optimize-max-chunks</code><p class="description mobile">Try to keep the chunk count below a limit</p></p></div></td>\n<td class="description desktop">Try to keep the chunk count below a limit</td>\n<td><a href="/plugins/limit-chunk-count-plugin">LimitChunkCountPlugin</a></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Plugin Used</p></div>\n<div class="content"><p><code>--optimize-min-chunk-size</code><p class="description mobile">Try to keep the chunk size above a limit</p></p></div></td>\n<td class="description desktop">Try to keep the chunk size above a limit</td>\n<td><a href="/plugins/min-chunk-size-plugin">MinChunkSizePlugin</a></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Plugin Used</p></div>\n<div class="content"><p><code>--optimize-minimize</code><p class="description mobile">Minimize javascript and switches loaders to minimizing</p></p></div></td>\n<td class="description desktop">Minimize javascript and switches loaders to minimizing</td>\n<td><a href="/plugins/terser-webpack-plugin/">TerserPlugin</a>\n & \n<a href="/plugins/loader-options-plugin/">LoaderOptionsPlugin</a></td>\n</tr>\n</tbody>\n</table>\n<h3 id="resolve-options">Resolve Options<a href="#resolve-options" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>These allow you to configure the webpack <a href="/configuration/resolve/">resolver</a> with aliases and extensions.</p>\n<table>\n<thead>\n<tr>\n<th>Parameter</th>\n<th>Explanation</th>\n<th>Example</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Example</p></div>\n<div class="content"><p><code>--resolve-alias</code><p class="description mobile">Setup a module alias for resolving</p></p></div></td>\n<td class="description desktop">Setup a module alias for resolving</td>\n<td>--resolve-alias jquery-plugin=jquery.plugin</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Example</p></div>\n<div class="content"><p><code>--resolve-extensions</code><p class="description mobile">Setup extensions that should be used to resolve modules</p></p></div></td>\n<td class="description desktop">Setup extensions that should be used to resolve modules</td>\n<td>--resolve-extensions .es6 .js .ts</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Example</p></div>\n<div class="content"><p><code>--resolve-loader-alias</code><p class="description mobile">Minimize javascript and switches loaders to minimizing</p></p></div></td>\n<td class="description desktop">Minimize javascript and switches loaders to minimizing</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id="stats-options">Stats Options<a href="#stats-options" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>These options allow webpack to display various <a href="/configuration/stats/">stats</a> and style them differently in the console output.</p>\n<table>\n<thead>\n<tr>\n<th>Parameter</th>\n<th>Explanation</th>\n<th>Type</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--color</code>, <code>--colors</code><p class="description mobile">Force colors on the console [default: enabled for TTY output only]</p></p></div></td>\n<td class="description desktop">Force colors on the console \n[\ndefault: enabled for TTY output only\n]</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--no-color</code>, <code>--no-colors</code><p class="description mobile">Force no colors on the console</p></p></div></td>\n<td class="description desktop">Force no colors on the console</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--display</code><p class="description mobile">Select <a href="/configuration/stats">display preset</a> (verbose, detailed, normal, minimal, errors-only, none; since webpack 3.0.0)</p></p></div></td>\n<td class="description desktop">Select \n<a href="/configuration/stats">display preset</a>\n (verbose, detailed, normal, minimal, errors-only, none; since webpack 3.0.0)</td>\n<td>string</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--display-cached</code><p class="description mobile">Display also cached modules in the output</p></p></div></td>\n<td class="description desktop">Display also cached modules in the output</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--display-cached-assets</code><p class="description mobile">Display also cached assets in the output</p></p></div></td>\n<td class="description desktop">Display also cached assets in the output</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--display-chunks</code><p class="description mobile">Display chunks in the output</p></p></div></td>\n<td class="description desktop">Display chunks in the output</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--display-depth</code><p class="description mobile">Display distance from entry point for each module</p></p></div></td>\n<td class="description desktop">Display distance from entry point for each module</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--display-entrypoints</code><p class="description mobile">Display entry points in the output</p></p></div></td>\n<td class="description desktop">Display entry points in the output</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--display-error-details</code><p class="description mobile">Display details about errors</p></p></div></td>\n<td class="description desktop">Display details about errors</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--display-exclude</code><p class="description mobile">Exclude modules in the output</p></p></div></td>\n<td class="description desktop">Exclude modules in the output</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--display-max-modules</code><p class="description mobile">Set the maximum number of visible modules in output</p></p></div></td>\n<td class="description desktop">Set the maximum number of visible modules in output</td>\n<td>number</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--display-modules</code><p class="description mobile">Display even excluded modules in the output</p></p></div></td>\n<td class="description desktop">Display even excluded modules in the output</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--display-optimization-bailout</code><p class="description mobile">Scope hoisting fallback trigger (since webpack 3.0.0)</p></p></div></td>\n<td class="description desktop">Scope hoisting fallback trigger (since webpack 3.0.0)</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--display-origins</code><p class="description mobile">Display origins of chunks in the output</p></p></div></td>\n<td class="description desktop">Display origins of chunks in the output</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--display-provided-exports</code><p class="description mobile">Display information about exports provided from modules</p></p></div></td>\n<td class="description desktop">Display information about exports provided from modules</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--display-reasons</code><p class="description mobile">Display reasons about module inclusion in the output</p></p></div></td>\n<td class="description desktop">Display reasons about module inclusion in the output</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--display-used-exports</code><p class="description mobile">Display information about used exports in modules (Tree Shaking)</p></p></div></td>\n<td class="description desktop">Display information about used exports in modules (Tree Shaking)</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--hide-modules</code><p class="description mobile">Hide info about modules</p></p></div></td>\n<td class="description desktop">Hide info about modules</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--sort-assets-by</code><p class="description mobile">Sort the assets list by property in asset</p></p></div></td>\n<td class="description desktop">Sort the assets list by property in asset</td>\n<td>string</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--sort-chunks-by</code><p class="description mobile">Sort the chunks list by property in chunk</p></p></div></td>\n<td class="description desktop">Sort the chunks list by property in chunk</td>\n<td>string</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--sort-modules-by</code><p class="description mobile">Sort the modules list by property in module</p></p></div></td>\n<td class="description desktop">Sort the modules list by property in module</td>\n<td>string</td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Type</p></div>\n<div class="content"><p><code>--verbose</code><p class="description mobile">Show more details</p></p></div></td>\n<td class="description desktop">Show more details</td>\n<td>boolean</td>\n</tr>\n</tbody>\n</table>\n<h3 id="advanced-options">Advanced Options<a href="#advanced-options" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<table>\n<thead>\n<tr>\n<th>Parameter</th>\n<th>Explanation</th>\n<th>Usage</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Usage</p></div>\n<div class="content"><p><code>--bail</code><p class="description mobile">Abort the compilation on first error</p></p></div></td>\n<td class="description desktop">Abort the compilation on first error</td>\n<td></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Usage</p></div>\n<div class="content"><p><code>--cache</code><p class="description mobile">Enable in memory caching [Enabled by default for watch]</p></p></div></td>\n<td class="description desktop">Enable in memory caching \n[\nEnabled by default for watch\n]</td>\n<td><code>--cache=false</code></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Usage</p></div>\n<div class="content"><p><code>--define</code><p class="description mobile">Define any free variable, see <a href="/guides/shimming">shimming</a></p></p></div></td>\n<td class="description desktop">Define any free variable, see \n<a href="/guides/shimming">shimming</a></td>\n<td><code>--define process.env.NODE_ENV="\'development\'"</code></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Usage</p></div>\n<div class="content"><p><code>--hot</code><p class="description mobile">Enables <a href="/concepts/hot-module-replacement">Hot Module Replacement</a></p></p></div></td>\n<td class="description desktop">Enables \n<a href="/concepts/hot-module-replacement">Hot Module Replacement</a></td>\n<td><code>--hot=true</code></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Usage</p></div>\n<div class="content"><p><code>--labeled-modules</code><p class="description mobile">Enables labeled modules [Uses LabeledModulesPlugin]</p></p></div></td>\n<td class="description desktop">Enables labeled modules \n[\nUses LabeledModulesPlugin\n]</td>\n<td></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Usage</p></div>\n<div class="content"><p><code>--live-reload</code><p class="description mobile">Enables live reloading</p></p></div></td>\n<td class="description desktop">Enables live reloading</td>\n<td><code>--live-reload=true</code></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Usage</p></div>\n<div class="content"><p><code>--plugin</code><p class="description mobile">Load this <a href="/configuration/plugins/">plugin</a></p></p></div></td>\n<td class="description desktop">Load this \n<a href="/configuration/plugins/">plugin</a></td>\n<td></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Usage</p></div>\n<div class="content"><p><code>--prefetch</code><p class="description mobile">Prefetch the particular file</p></p></div></td>\n<td class="description desktop">Prefetch the particular file</td>\n<td><code>--prefetch=./files.js</code></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Usage</p></div>\n<div class="content"><p><code>--provide</code><p class="description mobile">Provide these modules as globals, see <a href="/guides/shimming">shimming</a></p></p></div></td>\n<td class="description desktop">Provide these modules as globals, see \n<a href="/guides/shimming">shimming</a></td>\n<td><code>--provide jQuery=jquery</code></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Usage</p></div>\n<div class="content"><p><code>--records-input-path</code><p class="description mobile">Path to the records file (reading)</p></p></div></td>\n<td class="description desktop">Path to the records file (reading)</td>\n<td></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Usage</p></div>\n<div class="content"><p><code>--records-output-path</code><p class="description mobile">Path to the records file (writing)</p></p></div></td>\n<td class="description desktop">Path to the records file (writing)</td>\n<td></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Usage</p></div>\n<div class="content"><p><code>--records-path</code><p class="description mobile">Path to the records file</p></p></div></td>\n<td class="description desktop">Path to the records file</td>\n<td></td>\n</tr>\n<tr>\n<td><div class="title"><p>Parameter</p><p>Explanation</p><p>Usage</p></div>\n<div class="content"><p><code>--target</code><p class="description mobile">The <a href="/configuration/target/">targeted</a> execution environment</p></p></div></td>\n<td class="description desktop">The \n<a href="/configuration/target/">targeted</a>\n execution environment</td>\n<td><code>--target=\'node\'</code></td>\n</tr>\n</tbody>\n</table>\n<h3 id="shortcuts">Shortcuts<a href="#shortcuts" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<table>\n<thead>\n<tr>\n<th>Shortcut</th>\n<th>Replaces</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><div class="title"><p>Shortcut</p><p>Replaces</p></div>\n<div class="content"><p>-d<p class="description mobile"><code>--debug --devtool cheap-module-eval-source-map --output-pathinfo</code></p></p></div></td>\n<td class="description desktop"><code>--debug --devtool cheap-module-eval-source-map --output-pathinfo</code></td>\n</tr>\n<tr>\n<td><div class="title"><p>Shortcut</p><p>Replaces</p></div>\n<div class="content"><p>-p<p class="description mobile"><code>--optimize-minimize --define process.env.NODE_ENV="production"</code>, see <a href="/guides/production">building for production</a></p></p></div></td>\n<td class="description desktop"><code>--optimize-minimize --define process.env.NODE_ENV="production"</code>\n, see \n<a href="/guides/production">building for production</a></td>\n</tr>\n</tbody>\n</table>\n<h3 id="profiling">Profiling<a href="#profiling" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>The <code>--profile</code> option captures timing information for each step of the compilation and includes this in the output.</p>\n<pre><code class="hljs language-bash">webpack --profile\n\n⋮\n<span class="token punctuation">[</span>0<span class="token punctuation">]</span> ./src/index.js 90 bytes <span class="token punctuation">{</span>0<span class="token punctuation">}</span> <span class="token punctuation">[</span>built<span class="token punctuation">]</span>\n factory:22ms building:16ms <span class="token operator">=</span> 38ms</code></pre>\n<p>For each module, the following details are included in the output as applicable:</p>\n<ul>\n<li><code>factory</code>: time to collect module metadata (e.g. resolving the filename)</li>\n<li><code>building</code>: time to build the module (e.g. loaders and parsing)</li>\n<li><code>dependencies</code>: time to identify and connect the module’s dependencies</li>\n</ul>\n<p>Paired with <code>--progress</code>, <code>--profile</code> gives you an in-depth idea of which step in the compilation is taking how long. This can help you optimize your build in a more informed manner.</p>\n<pre><code class="hljs language-bash">webpack --progress --profile\n\n30ms building modules\n1ms sealing\n1ms optimizing\n0ms basic module optimization\n1ms module optimization\n1ms advanced module optimization\n0ms basic chunk optimization\n0ms chunk optimization\n1ms advanced chunk optimization\n0ms module and chunk tree optimization\n1ms module reviving\n0ms module order optimization\n1ms module <span class="token function">id</span> optimization\n1ms chunk reviving\n0ms chunk order optimization\n1ms chunk <span class="token function">id</span> optimization\n10ms hashing\n0ms module assets processing\n13ms chunk assets processing\n1ms additional chunk assets processing\n0ms recording\n0ms additional asset processing\n26ms chunk asset optimization\n1ms asset optimization\n6ms emitting\n⋮</code></pre>\n'}}]);