Skip to content

updated 4.md #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 28, 2019
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions src/content/migrate/4.md
Original file line number Diff line number Diff line change
@@ -11,23 +11,30 @@ This guide only shows major changes that affect end users. For more details plea

## Node.js v4

If you are still using Node.js v4 or lower, you need to upgrade your Node.js installation to Node.js v6 or higher.
*TLDR:; Node.js versions lower than 6 are no longer supported. So, upgrade to the latest Node.js LTS verison.*

If you are still using Node.js v4 or lower, you need to upgrade your Node.js installation to Node.js v6 or higher. Ideally you should be getting the latest Long Term Support(LTS) version of Node.js. Instructions for upgrading your Node.js version can be found [here](https://stackoverflow.com/questions/10075990/upgrading-node-js-to-latest-version). This is because the source of webpack was changed to a higher ECMAScript version in webpack 4.

## CLI

The CLI has moved to a separate package: webpack-cli. You need to install it before using webpack, see [basic setup](/guides/getting-started/#basic-setup).

The installation guide can be found [here](/src/content/guides/installation.md).


## Update plugins

Many 3rd-party plugins need to be upgraded to their latest version to be compatible.
Many 3rd party plugins need to be updated to the latest versions to be compatible with webpack 4. Many of the popular plugins and the links to their repositories can be found [here](https://github.com/webpack-contrib/awesome-webpack#webpack-plugins).

A more informative resource can be found [here](https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202).


## mode

Add the new [`mode`](/concepts/mode/) option to your config. Set it to production or development in your configuration depending on config type.

More information on the different types of `mode`'s like `none`, `development`, and `production` are mentioned in [here](https://webpack.js.org/concepts/mode/#usage).

__webpack.config.js__

``` diff
@@ -37,7 +44,9 @@ module.exports = {
}
```

Alternatively you can pass it via CLI: `--mode production`/`--mode development`
Alternatively you can pass it via CLI: `--mode production`/ `--mode development`

T> Since the goals of the `development` and `production` versions are different. You could use `webpack-merge` to use the best of both modes. Read more [here](https://github.com/webpack/webpack.js.org/blob/master/src/content/guides/production.md)

## Deprecated/Removed plugins

@@ -91,6 +100,8 @@ The `CommonsChunkPlugin` was removed. Instead the [`optimization.splitChunks`](/

See documentation of the [`optimization.splitChunks`](/configuration/optimization/#optimization-splitchunks) for more details. The default configuration may already suit your needs.

More information on this change is mentioned in [here](https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693).

T> When generating the HTML from the stats you can use `optimization.splitChunks.chunks: "all"` which is the optimal configuration in most cases.

## import() and CommonJS