Skip to content

Commit

Permalink
Update webpack post
Browse files Browse the repository at this point in the history
  • Loading branch information
adamyonk committed Apr 3, 2018
1 parent 18b21cf commit 1fc9948
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions src/pages/blog/2018-04-02-webpack-3-to-4.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ I recently moved a large project from webpack 3 to 4, and the documentation is v

## Upgrade node to 8.9.4

To get the best performance out of v4, [@wSokra says](https://twitter.com/wSokra/status/967852475918274561) use node 8.9.4.
To get the best performance out of v4, [@wSokra says](https://twitter.com/wSokra/status/967852475918274561) use at least node 8.9.4.

## Upgrade webpack

Expand All @@ -31,11 +31,11 @@ You have to choose a mode:
mode: "production",
```

## Get rid of webpack.optimize.CommonsChunkPlugin
## Change CommonsChunkPlugin to splitChunks

`Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.`

We used `runtime` and `vendor` chunks in v3 like so:
We used runtime and vendor chunks in v3 like so:

```javascript
plugins: [
Expand Down Expand Up @@ -71,15 +71,15 @@ optimization: {

More info about the new `optimization.splitChunks` option can be found [here](https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693).

## Get rid of webpack.optimize.ModuleConcatenationPlugin
## Get rid of ModuleConcatenationPlugin

It is now on by default in `production` mode.
It is now on by default in production mode.

## Change webpack.optimize.UglifyJsPlugin
## Change UglifyJsPlugin

`Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.`

v4 now handles dead code elimination internally. Both it and minimization are on by default in `production` mode, but to continue tuning Uglify settings, add [uglifyjs-webpack-plugin](https://www.npmjs.com/package/uglifyjs-webpack-plugin):
v4 now handles dead code elimination internally. Both it and minimization are on by default in production mode, but to continue tuning Uglify settings, add [uglifyjs-webpack-plugin](https://www.npmjs.com/package/uglifyjs-webpack-plugin):

```bash
yarn add -D uglifyjs-webpack-plugin
Expand Down

0 comments on commit 1fc9948

Please sign in to comment.