Issue 1:
Complete changelog for 4.0.0-alpha.5 compared to version 3:

Items changed from 4.0.0-alpha.4 to 4.0.0-alpha.5 are prefixed with [new]

Big changes

Environment

Node.js 4 is no longer supported. Source Code was upgraded to a higher ecmascript version.

Usage

You have to choose (mode or --mode) between two modes now: production or development

production enables all kind of optimizations to generate optimized bundles

development enables comments and hint for development and enables the eval devtool

WIP: addition hints in development mode

production doesn't support watching, development is optimized for fast incremental rebuilds

production also enables module concatenating (Scope Hoisting)

You can configure this in detail with the flags in optimization.* (build your custom mode)

process.env.NODE_ENV are set to production or development (only in built code, not in config)

There is a hidden none mode which disables everything

Syntax

import() always returns a namespace object. CommonJS modules are wrapped into the default export

This probably breaks your code, if you used to import CommonJs with import()

Configuration

You no longer need to use these plugins:

NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors (on by default in production mode)

ModuleConcatenationPlugin -> optimization.concatenateModules (on by default in production mode)

NamedModulesPlugin -> optimization.namedModules (on by default in develoment mode)

[new] CommonsChunkPlugin was removed -> optimization.splitChunks

JSON

webpack now handles JSON natively

You may need to add type: "javascript/auto" when transforming JSON via loader to JS

Just using JSON without loader should still work

allows to import JSON via ESM syntax

unused exports elimination for JSON modules

Optimization

Upgrade uglifyjs-webpack-plugin to v1

ES15 support

Big features

Modules

webpack now supports these module types:

javascript/auto: (The default one in webpack 3) Javascript module with all module systems enabled: CommonJS, AMD, ESM

javascript/esm: EcmaScript modules, all other module system are not available

javascript/dynamic: Only CommonJS and, EcmaScript modules are not available

json: JSON data, it's available via require and import

webassembly/experimental: WebAssembly modules (currently experimental)

javascript/esm handles ESM more strict compared to javascript/auto:

Imported names need to exist on imported module

Non-ESM can only imported via default import, everything else (including namespace import) emit errors

In .mjs modules

javascript/esm is used

WebAssembly modules

can import other modules (JS and WASM)

Exports from WebAssembly modules are validated by ESM import

You'll get a warning/error when trying to import a non-existing export from WASM

Optimization

sideEffects: false is now supported in package.json

Instead of a JSONP function a JSONP array is used -> async support

[new] New optimization.splitChunks option was introduced

Details: https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693

[new] Dead branches are now removed by webpack itself

Before: Uglify removed the dead code

Now: webpack removes the dead code (in some cases)

This prevents crashing when import() occur in a dead branch

Syntax

webpackInclude and webpackExclude are supported by the magic comment for import(). They allow to filter files when using a dynamic expression.

[new] Using System.import() now emits a warning

You can disable the warning with Rule.parser.system: true

You can disable System.import with Rule.parser.system: false

Configuration

Resolving can now be configured with module.rules[].resolve. It's merged with the global configuration.

optimization.minimize has been added to switch minimizing on/off

By default: on in production mode, off in development mode

optimization.minimizer has been added to configurate minimizers and options

many config options which support placeholders now also support a function

Usage

Some Plugin options are now validated

WIP: Better output, no process exit, stack trace, more plugins

CLI has been move to webpack-cli, you need to install webpack-cli to use the CLI

The ProgressPlugin (--progress) now displays plugin names

At least for plugins migrated to the new plugin system

Performance

UglifyJs now caches and parallizes by default

Multiple performance improvements, especially for faster incremental rebuilds

performance improvement for RemoveParentModulesPlugin

Stats

Stats can display modules nested in concatenated modules

Features

Configuration

Module type is automatically choosen for mjs, json and wasm extensions. Other extensions need to be configured via module.rules[].type

Incorrect options.dependencies configurations now throw error

Rule.ident is now allowed by schema

sideEffects can be overriden via module.rules

output.hashFunction can now be a Constructor to a custom hash function

You can provide a non-cryto hash function for performance reasons

add output.globalObject config option to allow to choose the global object reference in runtime exitCode

Runtime

Error for chunk loading now includes more information and two new properties type and request.

Performance

webpacks AST can be passed directly from loader to webpack to avoid extra parsing

Unused modules are no longer unnecessarly concatenated

[new] Add a ProfilingPlugin which write a (Chrome) profile file which includes timings of plugins

[new] Migrate to using for of instead of forEach

[new] Migrate to using Map and Set instead of Objects

[new] Migrate to using includes instead of indexOf

[new] Replaced some RegExp with string methods

[new] Queue don't enqueues the same job twice

Optimization

When using more than 25 exports mangled export names are shorter.

script tags are no longer text/javascript and async as this are the default values (saves a few bytes)

The concatenated module now generates a bit less code

constant replacements now don't need __webpack_require__ and argument is omitted

Defaults

webpack now looks for the .wasm, .mjs, .js and .json extensions in this order

output.pathinfo is now on by default in develoment mode

in-memory caching is now off by default in production

entry defaults to ./src

output.path defaults to ./dist

Use production defaults when omiting the mode option

Usage

Add detailed progress reporting to SourceMapDevToolPlugin

Stats

Sizes are now shown in kiB instead of kB in Stats

[new] entrypoints are now shows by default in Stats

[new] chunks now display <{parent}> >{children}< and ={siblings}= in Stats

Syntax

A resource query is supported in context

Parser now understand new Foo() expressions

Parser can now evaluate **, &, |, ^, >>>, >>, << and ~

Referencing entry point name in import() now emits a error instead of a warning

[new] Upgraded to acorn 5

Bugfixes

Generated comments no longer break on */

webpack no longer modifies the passed options object

Compiler "watch-run" hook now has the Compiler as first parameter

add chunkCallbackName to the schema to allow configurating WebWorker template

Using module.id/loaded now correctly bails out of Module Concatentation (Scope Hoisting)

OccurenceOrderPlugin now sorts modules in correct order (instead of reversed)

timestamps for files are read from watcher when calling Watching.invalidate

Avoid using process.exit and use process.exitCode instead

fix bluebird warning in webpack/hot/signal

fix incorrect -! behavior with post loaders

add run and watchRun hooks for MultiCompiler

[new] this is now undefined in ESM

[new] Initial chunks no longer contribute to chunkhash of runtime chunk and hashes don't occur in chunk hash map

[new] VariableDeclaration are correctly identified as var, const or let

[new] Parser now parse the source code with the correct source type (module/script) when the module type javascript/dynamic or javascript/module is used.

Internal changes

Replaced plugin calls with tap calls (new plugin system)

Migrated many deprecated plugins to new plugin system API

added buildMeta.exportsType: "default" for json modules

Remove unused methods from Parser (parserStringArray, parserCalculatedStringArray)

Remove ability to clear BasicEvaluatedExpression and to have multiple types

Removed features

removed module.loaders

removed loaderContext.options

removed Compilation.notCacheable flag

removed NoErrorsPlugin

removed Dependency.isEqualResource

removed NewWatchingPlugin

[new] removed CommonsChunkPlugin

Breaking changes for plugins/loaders

new plugin system

plugin method is backward-compatible

Plugins should use Compiler.hooks.xxx.tap(<plugin name>, fn) now

New major version of enhanced-resolve

Templates for chunks may now generate multiple assets

Chunk.chunks/parents/blocks are no longer Arrays. A Set is used internally and there are methods to access it.

Parser.scope.renames and Parser.scope.definitions are no longer Objects/Arrays, but Map/Sets.

Parser uses StackedSetMap (LevelDB-like datastructure) instead of Arrays

Compiler.options is no longer set while applying plugins

Harmony Dependencies has changed because of refactoring

Dependency.getReference() may now return a weak property. Dependency.weak is now used by the Dependency base class and returned in the base impl of getReference()

Constructor arguments changed for all Modules

Merged options into options object for ContextModule and resolveDependencies

Changed and renamed dependencies for `import()

Moved Compiler.resolvers into Compiler.resolverFactory accessible with plugins

Dependency.isEqualResource has been replaced with Dependency.getResourceIdentifier

Methods on Template are now static

A new RuntimeTemplate class has been added and outputOptions and requestShortener has been moved to this class

Many methods has been updated to use the RuntimeTemplate instead

We plan to move code which accesses the runtime to this new class

Module.meta has been replaced with Module.buildMeta

Module.buildInfo and Module.factoryMeta have been added

Some properties of Module have been moved into the new objects

added loaderContext.rootContext which points to the context options. Loaders may use it to make stuff relative to the application root.

add this.hot flag to loader context when HMR is enabled

buildMeta.harmony has been replaced with buildMeta.exportsType: "namespace

[new] The chunk graph has changed:

Before: Chunks were connected with parent-child-relationships.

Now: ChunkGroups are connected with parent-child-relationships. ChunkGroups contain Chunks in order.

Before: AsyncDependenciesBlocks reference a list of Chunks in order.

Now: AsyncDependenciesBlocks reference a single ChunkGroup.

Migration

Node.js

If you are still using Node.js 4 or smaller:

Install Node.js 8. You could also install Node.js 6 but it's slower (2x).

CLI

To use the command line interface:

yarn add -D webpack-cli

or

npm install -D webpack-cli

Configuration

// webpack.production.config.js
module.exports = {
+ mode: "production",
plugins: [
- new UglifyJsPlugin(/* ... */),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
- new webpack.optimize.ModuleConcatenationPlugin(),
- new webpack.NoEmitOnErrorsPlugin()
]
}

// webpack.development.config.js
module.exports = {
+ mode: "development",
plugins: [
- new webpack.NamedModulesPlugin(),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
]
}

import() CommonJs

import() now always returns the namespace object and not the exports directly for non-ESM.

- import("./commonjs").then(exports => {
+ import("./commonjs").then({ default: exports } => {
// ...
})

Note: ESM modules are not affected.

Note: Babel transpiled ESM (__esModule: true) will work in .js modules (javascript/auto), but not in .mjs modules.

Note: For JSON the same is true, but as JSON modules also export each property as exports you could pick property via destruction.

CommonsChunkPlugin

The following guides try to give 1 to 1 translations for the CommonsChunkPlugin. This does not neccessary fit bet pratices.

Best practise

optimization: {
splitChunks: {
chunks: "all"
}
}

You need to generate the HTML from stats json. Use the entrypoints property from Stats to know which files to include for each entrypoint.

Initial vendor chunk

entry: {
vendor: ["react", "lodash", "angular", ...]
}
new CommonsChunkPlugin({
name: "vendors",
})

entry: {
vendor: ["react", "lodash", "angular", ...]
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
chunks: "initial",
test: "vendor",
name: "vendor",
enforce: true
}
}
}
}

Alternative:

optimization: {
splitChunks: {
cacheGroups: {
vendor: {
chunks: "initial",
test: path.resolve(__dirname, "node_modules")
name: "vendor",
enforce: true
}
}
}
}

Difference: This includes all used modules from node_modules and allows tree shaking.

Note: You don't need to specify a entry for the alternative.

Commons chunk

new CommonsChunkPlugin({
name: "commons",
minChunks: 3
})

optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: "initial",
minChunks: 3,
name: "commons",
enforce: true
}
}
}
}

Better vendor chunk

new CommonsChunkPlugin({
name: "vendors",
minChunks: module => {
return module.resource && /react|angluar|lodash/.test(module.resource);
}
})

optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /react|angluar|lodash/
chunks: "initial",
name: "vendor",
enforce: true
}
}
}
}

Async commons chunk

new CommonsChunkPlugin({
async: true,
// ...
})

Just omit it. The defaults already do such optimization.

Deep Children

Anything with deepChildren: true and no async.

See configuration above but use chunks: "all".

Loaders consuming JSON

module.rules: [
{
test: /\.special\.json$/,
+ type: "javascript/auto",
use: "special-loader"
}
]

Issue 2:
Do you want to request a feature or report a bug?

Feature

What is the current behavior?

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 #4192, #4713, #5233. Surely there are more.

If the current behavior is a bug, please provide the steps to reproduce.

Add something like UglifyJsPlugin and run webpack with --optimize-minimize

What is the expected behavior?

Give presedence to CLI (#5359)

If this is a feature request, what is motivation or use case for changing the behavior?

Beginners to Webpack might be confused when to use flags like --optimise-minimize or when to use plugins new UglifyJsPlugin. 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.

An initial list of some things to consider:

Are there any plugins that could have multiple instances?

Should check blindly for duplicates, or should there be a blacklist (like multiple UglifyJsPlugin instances are unwanted, but that might be the case for other plugins)

What to do about flags with multiple features (e.g. -p) - should warnings communicate that -p is more than just minification?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.