Skip to content

Commit 0a0be5a

Browse files
feat: Added codemods for migrating webpack from v4 to v5 (#7388)
1 parent ade6109 commit 0a0be5a

File tree

1 file changed

+46
-0
lines changed

1 file changed

+46
-0
lines changed

src/content/migrate/5.mdx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ contributors:
1212
- jamesgeorge007
1313
- getsnoopy
1414
- yevhen-logosha
15+
- akash-kumar-dev
1516
---
1617

1718
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.
@@ -35,6 +36,27 @@ Webpack 5 requires at least Node.js 10.13.0 (LTS), so make sure you upgrade your
3536
Some Plugins and Loaders might have a beta version that has to be used in order to be compatible with webpack 5.
3637
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.
3738

39+
40+
## Codemods
41+
42+
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.
43+
44+
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.
45+
46+
Run the [webpack v5 migration codemods](https://go.codemod.com/webpack-v5-recipe):
47+
48+
```bash
49+
npx codemod webpack/v5/migration-recipe
50+
```
51+
52+
This will run the following codemods from [Codemod registry](https://codemod.com/registry):
53+
54+
- [`webpack/v5/set-target-to-false-and-update-plugins`](https://go.codemod.com/webpack-set-target-false)
55+
- [`webpack/v5/migrate-library-target-to-library-object`](https://go.codemod.com/webpack-migrate-library-target)
56+
- [`webpack/v5/json-imports-to-default-imports`](https://go.codemod.com/webpack-json-imports)
57+
58+
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).
59+
3860
### Make sure your build has no errors or warnings
3961

4062
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 +148,14 @@ If you were not able to upgrade some plugins/loaders to the latest in Upgrade we
126148
}
127149
```
128150

151+
> **Note**: Codemod for this Chnages:
152+
>
153+
> ```bash
154+
> npx codemod set-target-to-false-and-update-plugins
155+
> ```
156+
>
157+
> (See the [registry here](https://codemod.com/registry/webpack-v5-set-target-to-false-and-update-plugins).)
158+
129159
- If you have output.library or output.libraryTarget defined, change the property names: (output.libraryTarget -> output.library.type, output.library -> output.library.name). Example
130160
131161
```json
@@ -148,6 +178,14 @@ If you were not able to upgrade some plugins/loaders to the latest in Upgrade we
148178
}
149179
```
150180
181+
> **Note**: Codemod for this Chnages:
182+
>
183+
> ```bash
184+
> npx codemod webpack/v5/migrate-library-target-to-library-object
185+
> ```
186+
>
187+
> (See the [registry here](https://codemod.com/registry/webpack-v5-migrate-library-target-to-library-object).)
188+
151189
If you were using WebAssembly via import, you should follow this two step process:
152190
153191
- Enable the deprecated spec by setting `experiments.syncWebAssembly: true`, to get the same behavior as in webpack 4.
@@ -204,6 +242,14 @@ import pkg from './package.json';
204242
console.log(pkg.version);
205243
```
206244
245+
> **Note**: Codemod for this Chnages:
246+
>
247+
> ```bash
248+
> npx codemod codemod webpack/v5/json-imports-to-default-imports
249+
> ```
250+
>
251+
> (See the [registry here](https://codemod.com/registry/webpack-v5-json-imports-to-default-imports).)
252+
207253
#### Cleanup the build code
208254
209255
- When using `const compiler = webpack(...);`, make sure to close the compiler after using it: `compiler.close(callback);`.

0 commit comments

Comments
 (0)