From dc072b6512610893290b25882fb46efe0493bbb5 Mon Sep 17 00:00:00 2001 From: Tobias Koppers Date: Wed, 21 Mar 2018 17:35:34 +0100 Subject: [PATCH 1/3] add migration guide --- src/content/guides/migrating.md | 111 +++++++++++++++++++++++++++++++- 1 file changed, 108 insertions(+), 3 deletions(-) diff --git a/src/content/guides/migrating.md b/src/content/guides/migrating.md index faca01aae0b4..933aa9bc1634 100644 --- a/src/content/guides/migrating.md +++ b/src/content/guides/migrating.md @@ -16,12 +16,117 @@ contributors: - ndelangen --- -The following sections describe the major changes from webpack 1 to 2. +This guide only shows major changes that affect end users. For more details please see [the changelog](https://github.com/webpack/webpack/releases). + +# Migration from 3 to 4 + +[Changelog](https://github.com/webpack/webpack/releases/tag/v4.0.0) + +## node.js 4 + +If you are still using node.js 4 or lower, you need to upgrade your node.js installation + +## CLI + +The CLI has moved to a separate package: webpack-cli. You need to install it to use the CLI. + +``` text +yarn add webpack-cli -D +``` + +``` text +npm install webpack-cli -D +``` + +## Update plugins + +Many 3rd-party plugins need to be upgraded to their latest version to be compatible. + +## mode -T> Note that there were far fewer changes between 2 and 3, so that migration shouldn't be too bad. If you are running into issues, please see [the changelog](https://github.com/webpack/webpack/releases) for details. +Add the new `mode` option to your config. Set it to production or development in your configuration depending on config type. -W> This content may be moved to the blog post in the near future as version 2 has been out for a while. On top of that, version 3 was recently released and version 4 is on the horizon. As noted above, folks should instead to refer to [the changelog](https://github.com/webpack/webpack/releases) for migrations. +``` diff ++mode: "production", +``` + +``` diff ++mode: "development", +``` + +Alternativly you can pass it via CLI: `--mode production`/`--mode development` + +## Deprecated/Removed plugins +These plugins can be removed from configuration as they are default in production mode: + +``` diff +-new NoEmitOnErrorsPlugin(), +-new ModuleConcatenationPlugin(), +-new DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }) +-new UglifyJsPlugin() +``` + +These plugins are default in development mode + +``` diff +-new NamedModulesPlugin() +``` + +These plugins were deprecated and are now removed: + +``` diff +-new NoErrorsPlugin(), +-new NewWatchingPlugin(), +``` + +## CommonsChunkPlugin + +The `CommonsChunkPlugin` was removed. Instead the `optimization.splitChunks` options can be used. + +See documentation for `optimization.splitChunks` to details. The default configuration may already suit your needs. + +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 + +When using `import()` to load non-ESM the result has changed in webpack 4. You now need access the `default` property to get the value of `module.exports`. + +## json and loaders + +When using a custom loader to transform `.json` files you now need to change the module type: + +``` diff + { + test: /config\.json$/, + loader: "special-loader", ++ type: "javascript/auto", + options: {...} + } +``` + +When still using the `json-loader`, it can be removed: + +``` diff +-{ +- test: /\.json$/, +- loader: "json-loader" +-} +``` + +## module.loaders + +`module.loaders` was deprecated since webpack 2 and is now removed in favor of `module.rules`. + +# Migration from 2 to 3 + +There are no breaking changes between 2 and 3 for end users. + +There are a few minor breaking changes for plugin authors: Please see [changelog](https://github.com/webpack/webpack/releases/tag/v3.0.0) for details. + +# Migration from 1 to 2 + +The following sections describe the major changes from webpack 1 to 2. ## `resolve.root`, `resolve.fallback`, `resolve.modulesDirectories` From 7c848bbf9e172212a2df233b189988dcb35ba510 Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Wed, 18 Jul 2018 18:38:41 +0300 Subject: [PATCH 2/3] docs(guides) Migrate v3 to v4 --- src/content/migrate/3.md | 4 +- src/content/migrate/4.md | 158 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 160 insertions(+), 2 deletions(-) create mode 100644 src/content/migrate/4.md diff --git a/src/content/migrate/3.md b/src/content/migrate/3.md index 0d2a23069753..beed2f8033d1 100644 --- a/src/content/migrate/3.md +++ b/src/content/migrate/3.md @@ -1,6 +1,6 @@ --- -title: To webpack v2, v3 -sort: 1 +title: To v2, v3 +sort: 2 contributors: - sokra - jhnns diff --git a/src/content/migrate/4.md b/src/content/migrate/4.md new file mode 100644 index 000000000000..a23a5966549e --- /dev/null +++ b/src/content/migrate/4.md @@ -0,0 +1,158 @@ +--- +title: To v4 from v3 +sort: 1 +contributors: + - sokra + - EugeneHlushko +--- + +This guide only shows major changes that affect end users. For more details please see [the changelog](https://github.com/webpack/webpack/releases). + + +## 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. + + +## 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). + + +## Update plugins + +Many 3rd-party plugins need to be upgraded to their latest version to be compatible. + + +## mode + +Add the new [`mode`](/concepts/mode/) option to your config. Set it to production or development in your configuration depending on config type. + +__webpack.config.js__ + +``` diff +module.exports = { + // ... + mode: 'production', +} +``` + +Alternatively you can pass it via CLI: `--mode production`/`--mode development` + +## Deprecated/Removed plugins + +These plugins can be removed from configuration as they are default in production mode: + +__webpack.config.js__ + +``` diff +module.exports = { + // ... + plugins: [ +- new NoEmitOnErrorsPlugin(), +- new ModuleConcatenationPlugin(), +- new DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }) +- new UglifyJsPlugin() + ], +} +``` + +These plugins are default in development mode + +__webpack.config.js__ + +``` diff +module.exports = { + // ... + plugins: [ +- new NamedModulesPlugin() + ], +} +``` + +These plugins were deprecated and are now removed: + +__webpack.config.js__ + +``` diff +module.exports = { + // ... + plugins: [ +- new NoErrorsPlugin(), +- new NewWatchingPlugin() + ], +} +``` + + +## CommonsChunkPlugin + +The `CommonsChunkPlugin` was removed. Instead the [`optimization.splitChunks`](/configuration/optimization/#optimization-splitchunks/) options can be used. + +See documentation of the [`optimization.splitChunks`](/configuration/optimization/#optimization-splitchunks/) for more details. The default configuration may already suit your needs. + +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 + +When using `import()` to load non-ESM the result has changed in webpack 4. Now you need to access the `default` property to get the value of `module.exports`. + +__non-esm.js__ + +``` javascript +module.exports = { + sayHello: () => { + console.log('hello world'); + } +}; +``` + +__example.js__ + +``` javascript +function sayHello() { + import('./non-esm.js').then(module => { + module.default.sayHello(); + }); +} +``` + +## json and loaders + +When using a custom loader to transform `.json` files you now need to change the module `type`: + +__webpack.config.js__ + +``` diff +module.exports = { + // ... + rules: [ + { + test: /config\.json$/, + loader: 'special-loader', ++ type: 'javascript/auto', + options: {...} + } + ] +}; +``` + +When still using the `json-loader`, it can be removed: + +__webpack.config.js__ + +``` diff +module.exports = { + // ... + rules: [ + { +- test: /\.json$/, +- loader: 'json-loader' + } + ] +}; +``` + +## module.loaders + +`module.loaders` were deprecated since webpack 2 and are now removed in favor of [`module.rules`](/configuration/module/#rule). From e3ab76f25d585026708c2986ec7adf6fbd328e38 Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Wed, 18 Jul 2018 19:08:44 +0300 Subject: [PATCH 3/3] docs(guides) Make migration guide titles consistent --- src/content/migrate/3.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/migrate/3.md b/src/content/migrate/3.md index beed2f8033d1..7029dd1a848c 100644 --- a/src/content/migrate/3.md +++ b/src/content/migrate/3.md @@ -1,5 +1,5 @@ --- -title: To v2, v3 +title: To v2 or v3 from v1 sort: 2 contributors: - sokra