From a0677b4e3f1b3a4933cfb897d113eacb885494b5 Mon Sep 17 00:00:00 2001 From: akash-kumar-dev Date: Tue, 10 Sep 2024 11:45:41 +0530 Subject: [PATCH 1/4] feat: Added codemods for migrating webpack from v4 to v5 --- src/content/migrate/5.mdx | 42 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/src/content/migrate/5.mdx b/src/content/migrate/5.mdx index 0153bc3b12b2..8801d5225867 100644 --- a/src/content/migrate/5.mdx +++ b/src/content/migrate/5.mdx @@ -35,6 +35,24 @@ Webpack 5 requires at least Node.js 10.13.0 (LTS), so make sure you upgrade your Some Plugins and Loaders might have a beta version that has to be used in order to be compatible with webpack 5. Make sure to read release notes of each individual plugin/loader when upgrading it, since latest version might only support webpack 5 and will fail in v4. In such case, it's recommended to update to the latest version that supports webpack 4. + +## Codemods + +To assist with the upgrade webpack from v4 to v5, we have added features that utilize codemods to automatically update your code to many of the new APIs and patterns. Run the following command to automatically update your code for webpack v5 migration: + +```bash +npx codemod webpack/v5/migration-recipe +``` + +This will run the following codemods from the webpack Codemod repository: + +- **webpack/v5/set-target-to-false-and-update-plugins** +- **webpack/v5/migrate-library-target-to-library-object** +- **webpack/v5/json-imports-to-default-imports** + +Each of these codemods automates the changes listed in the v5 migration guide. For a complete list of available webpack codemods and further details, see the [codemod registry](https://codemod.com/registry?q=webpack). + + ### Make sure your build has no errors or warnings There might be new errors or warnings because of the upgraded versions of `webpack`, `webpack-cli`, Plugins and Loaders. Keep an eye for deprecation warnings during the build. @@ -126,6 +144,14 @@ If you were not able to upgrade some plugins/loaders to the latest in Upgrade we } ``` + > **Note**: Codemod for this Chnages: + > + > ```bash + > npx codemod set-target-to-false-and-update-plugins + > ``` + > + > (See the [registry here](https://codemod.com/registry/webpack-v5-set-target-to-false-and-update-plugins).) + - If you have output.library or output.libraryTarget defined, change the property names: (output.libraryTarget -> output.library.type, output.library -> output.library.name). Example ```json @@ -148,6 +174,14 @@ If you were not able to upgrade some plugins/loaders to the latest in Upgrade we } ``` + > **Note**: Codemod for this Chnages: + > + > ```bash + > npx codemod webpack/v5/migrate-library-target-to-library-object + > ``` + > + > (See the [registry here](https://codemod.com/registry/webpack-v5-migrate-library-target-to-library-object).) + If you were using WebAssembly via import, you should follow this two step process: - Enable the deprecated spec by setting `experiments.syncWebAssembly: true`, to get the same behavior as in webpack 4. @@ -204,6 +238,14 @@ import pkg from './package.json'; console.log(pkg.version); ``` + > **Note**: Codemod for this Chnages: + > + > ```bash + > npx codemod codemod webpack/v5/json-imports-to-default-imports + > ``` + > + > (See the [registry here](https://codemod.com/registry/webpack-v5-json-imports-to-default-imports).) + #### Cleanup the build code - When using `const compiler = webpack(...);`, make sure to close the compiler after using it: `compiler.close(callback);`. From 77ef4b519991df1ea858c8c2c6d3bef030696fe1 Mon Sep 17 00:00:00 2001 From: akash-kumar-dev Date: Tue, 10 Sep 2024 15:49:42 +0530 Subject: [PATCH 2/4] Added Github usernmame in contributors list --- src/content/migrate/5.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/migrate/5.mdx b/src/content/migrate/5.mdx index 8801d5225867..846f596c89e0 100644 --- a/src/content/migrate/5.mdx +++ b/src/content/migrate/5.mdx @@ -12,6 +12,7 @@ contributors: - jamesgeorge007 - getsnoopy - yevhen-logosha + - akash-kumar-dev --- This guide aims to help you migrating to webpack 5 when using webpack directly. If you are using a higher level tool to run webpack, please refer to the tool for migration instructions. From 6668f5c4a3e1ee18746b1a45b5ce3b48b35e48fa Mon Sep 17 00:00:00 2001 From: akash-kumar-dev Date: Thu, 12 Sep 2024 14:14:25 +0530 Subject: [PATCH 3/4] docs: clarify codemod is unofficial and may require manual steps --- src/content/migrate/5.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/migrate/5.mdx b/src/content/migrate/5.mdx index 846f596c89e0..2fd0ec48622b 100644 --- a/src/content/migrate/5.mdx +++ b/src/content/migrate/5.mdx @@ -39,7 +39,7 @@ Webpack 5 requires at least Node.js 10.13.0 (LTS), so make sure you upgrade your ## Codemods -To assist with the upgrade webpack from v4 to v5, we have added features that utilize codemods to automatically update your code to many of the new APIs and patterns. Run the following command to automatically update your code for webpack v5 migration: +To assist with the upgrade from Webpack v4 to v5, we have provided a community codemod that can help automate parts of the migration process. Please note that this codemod is not an official Webpack tool, and while it aims to streamline the migration, it may not cover all cases. You may still need to perform additional manual steps to fully complete the upgrade. Run the following command to use the codemod for Webpack v5 migration: ```bash npx codemod webpack/v5/migration-recipe From d3fc7a06c956d885caf60e852def7941c049e9c5 Mon Sep 17 00:00:00 2001 From: Mohab Sameh Date: Tue, 17 Sep 2024 15:51:01 +0300 Subject: [PATCH 4/4] docs: adjust wording --- src/content/migrate/5.mdx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/content/migrate/5.mdx b/src/content/migrate/5.mdx index 2fd0ec48622b..32066e4cda69 100644 --- a/src/content/migrate/5.mdx +++ b/src/content/migrate/5.mdx @@ -39,20 +39,23 @@ Webpack 5 requires at least Node.js 10.13.0 (LTS), so make sure you upgrade your ## Codemods -To assist with the upgrade from Webpack v4 to v5, we have provided a community codemod that can help automate parts of the migration process. Please note that this codemod is not an official Webpack tool, and while it aims to streamline the migration, it may not cover all cases. You may still need to perform additional manual steps to fully complete the upgrade. Run the following command to use the codemod for Webpack v5 migration: +To assist with the upgrade from webpack v4 to v5, [Codemod](https://github.com/codemod-com/codemod) provides open-source community codemods that can help automate most of the migration process. + +Please note that these are not official webpack codemods, and while it aims to streamline the migration, it may not cover all cases. You may still need to perform additional manual steps to fully complete the upgrade. + +Run the [webpack v5 migration codemods](https://go.codemod.com/webpack-v5-recipe): ```bash npx codemod webpack/v5/migration-recipe ``` -This will run the following codemods from the webpack Codemod repository: - -- **webpack/v5/set-target-to-false-and-update-plugins** -- **webpack/v5/migrate-library-target-to-library-object** -- **webpack/v5/json-imports-to-default-imports** +This will run the following codemods from [Codemod registry](https://codemod.com/registry): -Each of these codemods automates the changes listed in the v5 migration guide. For a complete list of available webpack codemods and further details, see the [codemod registry](https://codemod.com/registry?q=webpack). +- [`webpack/v5/set-target-to-false-and-update-plugins`](https://go.codemod.com/webpack-set-target-false) +- [`webpack/v5/migrate-library-target-to-library-object`](https://go.codemod.com/webpack-migrate-library-target) +- [`webpack/v5/json-imports-to-default-imports`](https://go.codemod.com/webpack-json-imports) +Each of these codemods automates a change listed in the webpack v5 migration guide. For a complete list of available webpack v5 codemods, see [Codemod Registry](https://go.codemod.com/webpack-v5). ### Make sure your build has no errors or warnings