<p dir="auto">Complete changelog for 4.0.0-alpha.5 compared to version 3:</p>
<p dir="auto">Items changed from 4.0.0-alpha.4 to 4.0.0-alpha.5 are prefixed with <code class="notranslate">[new]</code></p>
<h1 dir="auto">Big changes</h1>
<ul dir="auto">
<li>Environment
<ul dir="auto">
<li>Node.js 4 is no longer supported. Source Code was upgraded to a higher ecmascript version.</li>
</ul>
</li>
<li>Usage
<ul dir="auto">
<li>You have to choose (<code class="notranslate">mode</code> or <code class="notranslate">--mode</code>) between two modes now: production or development
<ul dir="auto">
<li>production enables all kind of optimizations to generate optimized bundles</li>
<li>development enables comments and hint for development and enables the eval devtool
<ul dir="auto">
<li>WIP: addition hints in development mode</li>
</ul>
</li>
<li>production doesn't support watching, development is optimized for fast incremental rebuilds</li>
<li>production also enables module concatenating (Scope Hoisting)</li>
<li>You can configure this in detail with the flags in <code class="notranslate">optimization.*</code> (build your custom mode)</li>
<li><code class="notranslate">process.env.NODE_ENV</code> are set to production or development (only in built code, not in config)</li>
<li>There is a hidden <code class="notranslate">none</code> mode which disables everything</li>
</ul>
</li>
</ul>
</li>
<li>Syntax
<ul dir="auto">
<li><code class="notranslate">import()</code> always returns a namespace object. CommonJS modules are wrapped into the default export
<ul dir="auto">
<li>This probably breaks your code, if you used to import CommonJs with <code class="notranslate">import()</code></li>
</ul>
</li>
</ul>
</li>
<li>Configuration
<ul dir="auto">
<li>You no longer need to use these plugins:
<ul dir="auto">
<li><code class="notranslate">NoEmitOnErrorsPlugin</code> -&gt; <code class="notranslate">optimization.noEmitOnErrors</code> (on by default in production mode)</li>
<li><code class="notranslate">ModuleConcatenationPlugin</code> -&gt; <code class="notranslate">optimization.concatenateModules</code> (on by default in production mode)</li>
<li><code class="notranslate">NamedModulesPlugin</code> -&gt; <code class="notranslate">optimization.namedModules</code> (on by default in develoment mode)</li>
</ul>
</li>
<li>[new] <strong><code class="notranslate">CommonsChunkPlugin</code> was removed -&gt; <code class="notranslate">optimization.splitChunks</code></strong></li>
</ul>
</li>
<li>JSON
<ul dir="auto">
<li>webpack now handles JSON natively
<ul dir="auto">
<li>You may need to add <code class="notranslate">type: "javascript/auto"</code> when transforming JSON via loader to JS</li>
<li>Just using JSON without loader should still work</li>
</ul>
</li>
<li>allows to import JSON via ESM syntax
<ul dir="auto">
<li>unused exports elimination for JSON modules</li>
</ul>
</li>
</ul>
</li>
<li>Optimization
<ul dir="auto">
<li>Upgrade uglifyjs-webpack-plugin to v1
<ul dir="auto">
<li>ES15 support</li>
</ul>
</li>
</ul>
</li>
</ul>
<h1 dir="auto">Big features</h1>
<ul dir="auto">
<li>Modules
<ul dir="auto">
<li>webpack now supports these module types:
<ul dir="auto">
<li>javascript/auto: (The default one in webpack 3) Javascript module with all module systems enabled: CommonJS, AMD, ESM</li>
<li>javascript/esm: EcmaScript modules, all other module system are not available</li>
<li>javascript/dynamic: Only CommonJS and, EcmaScript modules are not available</li>
<li>json: JSON data, it's available via require and import</li>
<li>webassembly/experimental: WebAssembly modules (currently experimental)</li>
</ul>
</li>
<li><code class="notranslate">javascript/esm</code> handles ESM more strict compared to <code class="notranslate">javascript/auto</code>:
<ul dir="auto">
<li>Imported names need to exist on imported module</li>
<li>Non-ESM can only imported via <code class="notranslate">default</code> import, everything else (including namespace import) emit errors</li>
</ul>
</li>
<li>In <code class="notranslate">.mjs</code> modules
<ul dir="auto">
<li><code class="notranslate">javascript/esm</code> is used</li>
</ul>
</li>
<li>WebAssembly modules
<ul dir="auto">
<li>can import other modules (JS and WASM)</li>
<li>Exports from WebAssembly modules are validated by ESM import
<ul dir="auto">
<li>You'll get a warning/error when trying to import a non-existing export from WASM</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Optimization
<ul dir="auto">
<li><code class="notranslate">sideEffects: false</code> is now supported in package.json</li>
<li>Instead of a JSONP function a JSONP array is used -&gt; async support</li>
<li>[new] <strong>New <code class="notranslate">optimization.splitChunks</code> option was introduced</strong><br>
Details: <a href="https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693">https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693</a></li>
<li>[new] <strong>Dead branches are now removed by webpack itself</strong>
<ul dir="auto">
<li>Before: Uglify removed the dead code</li>
<li>Now: webpack removes the dead code (in some cases)</li>
<li>This prevents crashing when <code class="notranslate">import()</code> occur in a dead branch</li>
</ul>
</li>
</ul>
</li>
<li>Syntax
<ul dir="auto">
<li><code class="notranslate">webpackInclude</code> and <code class="notranslate">webpackExclude</code> are supported by the magic comment for <code class="notranslate">import()</code>. They allow to filter files when using a dynamic expression.</li>
<li>[new] <strong>Using <code class="notranslate">System.import()</code> now emits a warning</strong>
<ul dir="auto">
<li>You can disable the warning with <code class="notranslate">Rule.parser.system: true</code></li>
<li>You can disable <code class="notranslate">System.import</code> with <code class="notranslate">Rule.parser.system: false</code></li>
</ul>
</li>
</ul>
</li>
<li>Configuration
<ul dir="auto">
<li>Resolving can now be configured with <code class="notranslate">module.rules[].resolve</code>. It's merged with the global configuration.</li>
<li><code class="notranslate">optimization.minimize</code> has been added to switch minimizing on/off
<ul dir="auto">
<li>By default: on in production mode, off in development mode</li>
</ul>
</li>
<li><code class="notranslate">optimization.minimizer</code> has been added to configurate minimizers and options</li>
<li>many config options which support placeholders now also support a function</li>
</ul>
</li>
<li>Usage
<ul dir="auto">
<li>Some Plugin options are now validated
<ul dir="auto">
<li>WIP: Better output, no process exit, stack trace, more plugins</li>
</ul>
</li>
<li>CLI has been move to webpack-cli, you need to install <code class="notranslate">webpack-cli</code> to use the CLI</li>
<li>The ProgressPlugin (<code class="notranslate">--progress</code>) now displays plugin names
<ul dir="auto">
<li>At least for plugins migrated to the new plugin system</li>
</ul>
</li>
</ul>
</li>
<li>Performance
<ul dir="auto">
<li>UglifyJs now caches and parallizes by default</li>
<li>Multiple performance improvements, especially for faster incremental rebuilds</li>
<li>performance improvement for RemoveParentModulesPlugin</li>
</ul>
</li>
<li>Stats
<ul dir="auto">
<li>Stats can display modules nested in concatenated modules</li>
</ul>
</li>
</ul>
<h1 dir="auto">Features</h1>
<ul dir="auto">
<li>Configuration
<ul dir="auto">
<li>Module type is automatically choosen for mjs, json and wasm extensions. Other extensions need to be configured via module.rules[].type</li>
<li>Incorrect <code class="notranslate">options.dependencies</code> configurations now throw error</li>
<li><code class="notranslate">Rule.ident</code> is now allowed by schema</li>
<li><code class="notranslate">sideEffects</code> can be overriden via module.rules</li>
<li><code class="notranslate">output.hashFunction</code> can now be a Constructor to a custom hash function
<ul dir="auto">
<li>You can provide a non-cryto hash function for performance reasons</li>
</ul>
</li>
<li>add <code class="notranslate">output.globalObject</code> config option to allow to choose the global object reference in runtime exitCode</li>
</ul>
</li>
<li>Runtime
<ul dir="auto">
<li>Error for chunk loading now includes more information and two new properties <code class="notranslate">type</code> and <code class="notranslate">request</code>.</li>
</ul>
</li>
<li>Performance
<ul dir="auto">
<li>webpacks AST can be passed directly from loader to webpack to avoid extra parsing</li>
<li>Unused modules are no longer unnecessarly concatenated</li>
<li>[new] <strong>Add a ProfilingPlugin which write a (Chrome) profile file which includes timings of plugins</strong></li>
<li>[new] <strong>Migrate to using <code class="notranslate">for of</code> instead of <code class="notranslate">forEach</code></strong></li>
<li>[new] <strong>Migrate to using <code class="notranslate">Map</code> and <code class="notranslate">Set</code> instead of Objects</strong></li>
<li>[new] <strong>Migrate to using <code class="notranslate">includes</code> instead of <code class="notranslate">indexOf</code></strong></li>
<li>[new] <strong>Replaced some RegExp with string methods</strong></li>
<li>[new] <strong>Queue don't enqueues the same job twice</strong></li>
</ul>
</li>
<li>Optimization
<ul dir="auto">
<li>When using more than 25 exports mangled export names are shorter.</li>
<li>script tags are no longer <code class="notranslate">text/javascript</code> and <code class="notranslate">async</code> as this are the default values (saves a few bytes)</li>
<li>The concatenated module now generates a bit less code</li>
<li>constant replacements now don't need <code class="notranslate">__webpack_require__</code> and argument is omitted</li>
</ul>
</li>
<li>Defaults
<ul dir="auto">
<li>webpack now looks for the <code class="notranslate">.wasm</code>, <code class="notranslate">.mjs</code>, <code class="notranslate">.js</code> and <code class="notranslate">.json</code> extensions in this order</li>
<li><code class="notranslate">output.pathinfo</code> is now on by default in develoment mode</li>
<li>in-memory caching is now off by default in production</li>
<li><code class="notranslate">entry</code> defaults to <code class="notranslate">./src</code></li>
<li><code class="notranslate">output.path</code> defaults to <code class="notranslate">./dist</code></li>
<li>Use <code class="notranslate">production</code> defaults when omiting the <code class="notranslate">mode</code> option</li>
</ul>
</li>
<li>Usage
<ul dir="auto">
<li>Add detailed progress reporting to SourceMapDevToolPlugin</li>
</ul>
</li>
<li>Stats
<ul dir="auto">
<li>Sizes are now shown in kiB instead of kB in Stats</li>
<li>[new] <strong>entrypoints are now shows by default in Stats</strong></li>
<li>[new] <strong>chunks now display <code class="notranslate">&lt;{parent}&gt;</code> <code class="notranslate">&gt;{children}&lt;</code> and <code class="notranslate">={siblings}=</code> in Stats</strong></li>
</ul>
</li>
<li>Syntax
<ul dir="auto">
<li>A resource query is supported in context</li>
<li>Parser now understand <code class="notranslate">new Foo()</code> expressions</li>
<li>Parser can now evaluate <code class="notranslate">**</code>, <code class="notranslate">&amp;</code>, <code class="notranslate">|</code>, <code class="notranslate">^</code>, <code class="notranslate">&gt;&gt;&gt;</code>, <code class="notranslate">&gt;&gt;</code>, <code class="notranslate">&lt;&lt;</code> and <code class="notranslate">~</code></li>
<li>Referencing entry point name in <code class="notranslate">import()</code> now emits a error instead of a warning</li>
<li>[new] <strong>Upgraded to acorn 5</strong></li>
</ul>
</li>
</ul>
<h1 dir="auto">Bugfixes</h1>
<ul dir="auto">
<li>Generated comments no longer break on <code class="notranslate">*/</code></li>
<li>webpack no longer modifies the passed options object</li>
<li>Compiler "watch-run" hook now has the Compiler as first parameter</li>
<li>add <code class="notranslate">chunkCallbackName</code> to the schema to allow configurating WebWorker template</li>
<li>Using <code class="notranslate">module.id/loaded</code> now correctly bails out of Module Concatentation (Scope Hoisting)</li>
<li>OccurenceOrderPlugin now sorts modules in correct order (instead of reversed)</li>
<li>timestamps for files are read from watcher when calling <code class="notranslate">Watching.invalidate</code></li>
<li>Avoid using <code class="notranslate">process.exit</code> and use <code class="notranslate">process.exitCode</code> instead</li>
<li>fix bluebird warning in <code class="notranslate">webpack/hot/signal</code></li>
<li>fix incorrect <code class="notranslate">-!</code> behavior with post loaders</li>
<li>add <code class="notranslate">run</code> and <code class="notranslate">watchRun</code> hooks for <code class="notranslate">MultiCompiler</code></li>
<li>[new] <strong><code class="notranslate">this</code> is now undefined in ESM</strong></li>
<li>[new] <strong>Initial chunks no longer contribute to chunkhash of runtime chunk and hashes don't occur in chunk hash map</strong></li>
<li>[new] <strong>VariableDeclaration are correctly identified as <code class="notranslate">var</code>, <code class="notranslate">const</code> or <code class="notranslate">let</code></strong></li>
<li>[new] <strong>Parser now parse the source code with the correct source type (module/script) when the module type <code class="notranslate">javascript/dynamic</code> or <code class="notranslate">javascript/module</code> is used.</strong></li>
</ul>
<h1 dir="auto">Internal changes</h1>
<ul dir="auto">
<li>Replaced <code class="notranslate">plugin</code> calls with <code class="notranslate">tap</code> calls (new plugin system)</li>
<li>Migrated many deprecated plugins to new plugin system API</li>
<li>added <code class="notranslate">buildMeta.exportsType: "default"</code> for json modules</li>
<li>Remove unused methods from Parser (parserStringArray, parserCalculatedStringArray)</li>
<li>Remove ability to clear BasicEvaluatedExpression and to have multiple types</li>
</ul>
<h1 dir="auto">Removed features</h1>
<ul dir="auto">
<li>removed <code class="notranslate">module.loaders</code></li>
<li>removed <code class="notranslate">loaderContext.options</code></li>
<li>removed <code class="notranslate">Compilation.notCacheable</code> flag</li>
<li>removed <code class="notranslate">NoErrorsPlugin</code></li>
<li>removed <code class="notranslate">Dependency.isEqualResource</code></li>
<li>removed <code class="notranslate">NewWatchingPlugin</code></li>
<li>[new] <strong>removed <code class="notranslate">CommonsChunkPlugin</code></strong></li>
</ul>
<h1 dir="auto">Breaking changes for plugins/loaders</h1>
<ul dir="auto">
<li>new plugin system
<ul dir="auto">
<li><code class="notranslate">plugin</code> method is backward-compatible</li>
<li>Plugins should use <code class="notranslate">Compiler.hooks.xxx.tap(&lt;plugin name&gt;, fn)</code> now</li>
</ul>
</li>
<li>New major version of enhanced-resolve</li>
<li>Templates for chunks may now generate multiple assets</li>
<li><code class="notranslate">Chunk.chunks/parents/blocks</code> are no longer Arrays. A Set is used internally and there are methods to access it.</li>
<li><code class="notranslate">Parser.scope.renames</code> and <code class="notranslate">Parser.scope.definitions</code> are no longer Objects/Arrays, but Map/Sets.</li>
<li>Parser uses <code class="notranslate">StackedSetMap</code> (LevelDB-like datastructure) instead of Arrays</li>
<li><code class="notranslate">Compiler.options</code> is no longer set while applying plugins</li>
<li>Harmony Dependencies has changed because of refactoring</li>
<li><code class="notranslate">Dependency.getReference()</code> may now return a <code class="notranslate">weak</code> property. <code class="notranslate">Dependency.weak</code> is now used by the <code class="notranslate">Dependency</code> base class and returned in the base impl of <code class="notranslate">getReference()</code></li>
<li>Constructor arguments changed for all <code class="notranslate">Module</code>s</li>
<li>Merged options into options object for <code class="notranslate">ContextModule</code> and <code class="notranslate">resolveDependencies</code></li>
<li>Changed and renamed dependencies for `import()</li>
<li>Moved <code class="notranslate">Compiler.resolvers</code> into <code class="notranslate">Compiler.resolverFactory</code> accessible with plugins</li>
<li><code class="notranslate">Dependency.isEqualResource</code> has been replaced with <code class="notranslate">Dependency.getResourceIdentifier</code></li>
<li>Methods on <code class="notranslate">Template</code> are now static</li>
<li>A new RuntimeTemplate class has been added and <code class="notranslate">outputOptions</code> and <code class="notranslate">requestShortener</code> has been moved to this class
<ul dir="auto">
<li>Many methods has been updated to use the RuntimeTemplate instead</li>
<li>We plan to move code which accesses the runtime to this new class</li>
</ul>
</li>
<li><code class="notranslate">Module.meta</code> has been replaced with <code class="notranslate">Module.buildMeta</code></li>
<li><code class="notranslate">Module.buildInfo</code> and <code class="notranslate">Module.factoryMeta</code> have been added</li>
<li>Some properties of <code class="notranslate">Module</code> have been moved into the new objects</li>
<li>added <code class="notranslate">loaderContext.rootContext</code> which points to the <code class="notranslate">context</code> options. Loaders may use it to make stuff relative to the application root.</li>
<li>add <code class="notranslate">this.hot</code> flag to loader context when HMR is enabled</li>
<li><code class="notranslate">buildMeta.harmony</code> has been replaced with <code class="notranslate">buildMeta.exportsType: "namespace</code></li>
<li>[new] <strong>The chunk graph has changed:</strong>
<ul dir="auto">
<li>Before: Chunks were connected with parent-child-relationships.</li>
<li>Now: ChunkGroups are connected with parent-child-relationships. ChunkGroups contain Chunks in order.</li>
<li>Before: AsyncDependenciesBlocks reference a list of Chunks in order.</li>
<li>Now: AsyncDependenciesBlocks reference a single ChunkGroup.</li>
</ul>
</li>
</ul>
<h1 dir="auto">Migration</h1>
<h2 dir="auto">Node.js</h2>
<p dir="auto">If you are still using Node.js 4 or smaller:</p>
<p dir="auto">Install Node.js 8. You could also install Node.js 6 but it's slower (2x).</p>
<h2 dir="auto">CLI</h2>
<p dir="auto">To use the command line interface:</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="yarn add -D webpack-cli"><pre class="notranslate">yarn add -D webpack-cli</pre></div>
<p dir="auto">or</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npm install -D webpack-cli"><pre class="notranslate">npm install -D webpack-cli</pre></div>
<h2 dir="auto">Configuration</h2>
<div class="highlight highlight-source-diff notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  // webpack.production.config.js
  module.exports = {
+   mode: &quot;production&quot;,
    plugins: [
-     new UglifyJsPlugin(/* ... */),
-     new webpack.DefinePlugin({ &quot;process.env.NODE_ENV&quot;: JSON.stringify(&quot;production&quot;) }),
-     new webpack.optimize.ModuleConcatenationPlugin(),
-     new webpack.NoEmitOnErrorsPlugin()
    ]
  }"><pre class="notranslate">  // webpack.production.config.js
  module.exports = {
<span class="pl-mi1"><span class="pl-mi1">+</span>   mode: "production",</span>
    plugins: [
<span class="pl-md"><span class="pl-md">-</span>     new UglifyJsPlugin(/* ... */),</span>
<span class="pl-md"><span class="pl-md">-</span>     new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),</span>
<span class="pl-md"><span class="pl-md">-</span>     new webpack.optimize.ModuleConcatenationPlugin(),</span>
<span class="pl-md"><span class="pl-md">-</span>     new webpack.NoEmitOnErrorsPlugin()</span>
    ]
  }</pre></div>
<div class="highlight highlight-source-diff notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  // webpack.development.config.js
  module.exports = {
+   mode: &quot;development&quot;,
    plugins: [
-     new webpack.NamedModulesPlugin(),
-     new webpack.DefinePlugin({ &quot;process.env.NODE_ENV&quot;: JSON.stringify(&quot;development&quot;) }),
    ]
  }"><pre class="notranslate">  // webpack.development.config.js
  module.exports = {
<span class="pl-mi1"><span class="pl-mi1">+</span>   mode: "development",</span>
    plugins: [
<span class="pl-md"><span class="pl-md">-</span>     new webpack.NamedModulesPlugin(),</span>
<span class="pl-md"><span class="pl-md">-</span>     new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),</span>
    ]
  }</pre></div>
<h2 dir="auto"><code class="notranslate">import()</code> CommonJs</h2>
<p dir="auto"><code class="notranslate">import()</code> now always returns the namespace object and not the exports directly for non-ESM.</p>
<div class="highlight highlight-source-diff notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="- import(&quot;./commonjs&quot;).then(exports =&gt; {
+ import(&quot;./commonjs&quot;).then({ default: exports } =&gt; {
    // ...
  })"><pre class="notranslate"><span class="pl-md"><span class="pl-md">-</span> import("./commonjs").then(exports =&gt; {</span>
<span class="pl-mi1"><span class="pl-mi1">+</span> import("./commonjs").then({ default: exports } =&gt; {</span>
    // ...
  })</pre></div>
<p dir="auto">Note: ESM modules are not affected.</p>
<p dir="auto">Note: Babel transpiled ESM (<code class="notranslate">__esModule: true</code>) will work in <code class="notranslate">.js</code> modules (javascript/auto), but not in <code class="notranslate">.mjs</code> modules.</p>
<p dir="auto">Note: For JSON the same is true, but as JSON modules also export each property as exports you could pick property via destruction.</p>
<h2 dir="auto">CommonsChunkPlugin</h2>
<p dir="auto">The following guides try to give 1 to 1 translations for the CommonsChunkPlugin. This does not neccessary fit bet pratices.</p>
<h3 dir="auto">Best practise</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="optimization: {
  splitChunks: {
    chunks: &quot;all&quot;
  }
}"><pre class="notranslate">optimization: <span class="pl-kos">{</span>
  <span class="pl-c1">splitChunks</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">chunks</span>: <span class="pl-s">"all"</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">You need to generate the HTML from stats json. Use the <code class="notranslate">entrypoints</code> property from Stats to know which files to include for each entrypoint.</p>
<h3 dir="auto">Initial vendor chunk</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="entry: {
  vendor: [&quot;react&quot;, &quot;lodash&quot;, &quot;angular&quot;, ...]
}
new CommonsChunkPlugin({
  name: &quot;vendors&quot;,
})"><pre class="notranslate">entry: <span class="pl-kos">{</span>
  <span class="pl-c1">vendor</span>: <span class="pl-kos">[</span><span class="pl-s">"react"</span><span class="pl-kos">,</span> <span class="pl-s">"lodash"</span><span class="pl-kos">,</span> <span class="pl-s">"angular"</span><span class="pl-kos">,</span> ...<span class="pl-kos">]</span>
<span class="pl-kos">}</span>
<span class="pl-k">new</span> <span class="pl-v">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">name</span>: <span class="pl-s">"vendors"</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="entry: {
  vendor: [&quot;react&quot;, &quot;lodash&quot;, &quot;angular&quot;, ...]
},
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        chunks: &quot;initial&quot;,
        test: &quot;vendor&quot;,
        name: &quot;vendor&quot;,
        enforce: true
      }
    }
  }
}"><pre class="notranslate">entry: <span class="pl-kos">{</span>
  <span class="pl-c1">vendor</span>: <span class="pl-kos">[</span><span class="pl-s">"react"</span><span class="pl-kos">,</span> <span class="pl-s">"lodash"</span><span class="pl-kos">,</span> <span class="pl-s">"angular"</span><span class="pl-kos">,</span> ...<span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-s1">optimization</span>: <span class="pl-kos">{</span>
  <span class="pl-c1">splitChunks</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">vendor</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">chunks</span>: <span class="pl-s">"initial"</span><span class="pl-kos">,</span>
        <span class="pl-c1">test</span>: <span class="pl-s">"vendor"</span><span class="pl-kos">,</span>
        <span class="pl-c1">name</span>: <span class="pl-s">"vendor"</span><span class="pl-kos">,</span>
        <span class="pl-c1">enforce</span>: <span class="pl-c1">true</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Alternative:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        chunks: &quot;initial&quot;,
        test: path.resolve(__dirname, &quot;node_modules&quot;)
        name: &quot;vendor&quot;,
        enforce: true
      }
    }
  }
}"><pre class="notranslate">optimization: <span class="pl-kos">{</span>
  <span class="pl-c1">splitChunks</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">vendor</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">chunks</span>: <span class="pl-s">"initial"</span><span class="pl-kos">,</span>
        <span class="pl-c1">test</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">"node_modules"</span><span class="pl-kos">)</span>
        <span class="pl-s1">name</span>: <span class="pl-s">"vendor"</span><span class="pl-kos">,</span>
        <span class="pl-c1">enforce</span>: <span class="pl-c1">true</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Difference: This includes all used modules from node_modules and allows tree shaking.</p>
<p dir="auto">Note: You don't need to specify a entry for the alternative.</p>
<h3 dir="auto">Commons chunk</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="new CommonsChunkPlugin({
  name: &quot;commons&quot;,
  minChunks: 3
})"><pre class="notranslate"><span class="pl-k">new</span> <span class="pl-v">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">name</span>: <span class="pl-s">"commons"</span><span class="pl-kos">,</span>
  <span class="pl-c1">minChunks</span>: <span class="pl-c1">3</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        chunks: &quot;initial&quot;,
        minChunks: 3,
        name: &quot;commons&quot;,
        enforce: true
      }
    }
  }
}"><pre class="notranslate">optimization: <span class="pl-kos">{</span>
  <span class="pl-c1">splitChunks</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">commons</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">chunks</span>: <span class="pl-s">"initial"</span><span class="pl-kos">,</span>
        <span class="pl-c1">minChunks</span>: <span class="pl-c1">3</span><span class="pl-kos">,</span>
        <span class="pl-c1">name</span>: <span class="pl-s">"commons"</span><span class="pl-kos">,</span>
        <span class="pl-c1">enforce</span>: <span class="pl-c1">true</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Better vendor chunk</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="new CommonsChunkPlugin({
  name: &quot;vendors&quot;,
  minChunks: module =&gt; {
    return module.resource &amp;&amp; /react|angluar|lodash/.test(module.resource);
  }
})"><pre class="notranslate"><span class="pl-k">new</span> <span class="pl-v">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">name</span>: <span class="pl-s">"vendors"</span><span class="pl-kos">,</span>
  <span class="pl-en">minChunks</span>: <span class="pl-smi">module</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">resource</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-pds"><span class="pl-c1">/</span>react<span class="pl-c1">|</span>angluar<span class="pl-c1">|</span>lodash<span class="pl-c1">/</span></span><span class="pl-kos">.</span><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">resource</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /react|angluar|lodash/
        chunks: &quot;initial&quot;,
        name: &quot;vendor&quot;,
        enforce: true
      }
    }
  }
}"><pre class="notranslate">optimization: <span class="pl-kos">{</span>
  splitChunks: <span class="pl-kos">{</span>
    cacheGroups: <span class="pl-kos">{</span>
      vendor: <span class="pl-kos">{</span>
        test: <span class="pl-pds"><span class="pl-c1">/</span>react<span class="pl-c1">|</span>angluar<span class="pl-c1">|</span>lodash<span class="pl-c1">/</span></span>
        chunks: <span class="pl-s">"initial"</span><span class="pl-kos">,</span>
        <span class="pl-s1">name</span>: <span class="pl-s">"vendor"</span><span class="pl-kos">,</span>
        <span class="pl-s1">enforce</span>: <span class="pl-c1">true</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Async commons chunk</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="new CommonsChunkPlugin({
  async: true,
  // ...
})"><pre class="notranslate"><span class="pl-k">new</span> <span class="pl-v">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">async</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-c">// ...</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">Just omit it. The defaults already do such optimization.</p>
<h3 dir="auto">Deep Children</h3>
<p dir="auto">Anything with <code class="notranslate">deepChildren: true</code> and no <code class="notranslate">async</code>.</p>
<p dir="auto">See configuration above but use <code class="notranslate">chunks: "all"</code>.</p>
<h2 dir="auto">Loaders consuming JSON</h2>
<div class="highlight highlight-source-diff notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  module.rules: [
    {
      test: /\.special\.json$/,
+     type: &quot;javascript/auto&quot;,
      use: &quot;special-loader&quot;
    }
  ]"><pre class="notranslate">  module.rules: [
    {
      test: /\.special\.json$/,
<span class="pl-mi1"><span class="pl-mi1">+</span>     type: "javascript/auto",</span>
      use: "special-loader"
    }
  ]</pre></div>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Feature</p>


<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Seems a lot of issues are created from users unaware that some CLI flags are merely shortcuts to create plugins. Having duplicate plugins causes unwanted behaviours. Example issues are <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="205157385" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/4192" data-hovercard-type="pull_request" data-hovercard-url="/webpack/webpack/pull/4192/hovercard" href="https://github.com/webpack/webpack/pull/4192">#4192</a>, <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="221929600" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/4713" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/4713/hovercard" href="https://github.com/webpack/webpack/issues/4713">#4713</a>, <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="241226577" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/5233" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/5233/hovercard" href="https://github.com/webpack/webpack/issues/5233">#5233</a>. Surely there are more.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>



<p dir="auto">Add something like <code class="notranslate">UglifyJsPlugin</code> and run webpack with <code class="notranslate">--optimize-minimize</code></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Give presedence to CLI (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="245070920" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/5359" data-hovercard-type="pull_request" data-hovercard-url="/webpack/webpack/pull/5359/hovercard" href="https://github.com/webpack/webpack/pull/5359">#5359</a>)</p>
<p dir="auto"><strong>If this is a feature request, what is motivation or use case for changing the behavior?</strong></p>
<p dir="auto">Beginners to Webpack might be confused when to use flags like <code class="notranslate">--optimise-minimize</code> or when to use plugins <code class="notranslate">new UglifyJsPlugin</code>. We could add console warnings when multiple instances of the same plugin type exists or similar. Add a short link to documentation page that explains how CLI flags are short-cuts and that CLI flags will take presedence. The React library is particularly good at providing these warnings.</p>
<p dir="auto">An initial list of some things to consider:</p>
<ul dir="auto">
<li>Are there any plugins that could have multiple instances?</li>
<li>Should check blindly for duplicates, or should there be a blacklist (like multiple <code class="notranslate">UglifyJsPlugin</code> instances are unwanted, but that might be the case for other plugins)</li>
<li>What to do about flags with multiple features (e.g. <code class="notranslate">-p</code>) - should warnings communicate that <code class="notranslate">-p</code> is more than just minification?</li>
</ul>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.</strong></p>