Skip to content

Commit a0677b4

Browse files
feat: Added codemods for migrating webpack from v4 to v5
1 parent bafd68a commit a0677b4

File tree

1 file changed

+42
-0
lines changed

1 file changed

+42
-0
lines changed

src/content/migrate/5.mdx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,24 @@ Webpack 5 requires at least Node.js 10.13.0 (LTS), so make sure you upgrade your
3535
Some Plugins and Loaders might have a beta version that has to be used in order to be compatible with webpack 5.
3636
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.
3737

38+
39+
## Codemods
40+
41+
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:
42+
43+
```bash
44+
npx codemod webpack/v5/migration-recipe
45+
```
46+
47+
This will run the following codemods from the webpack Codemod repository:
48+
49+
- **webpack/v5/set-target-to-false-and-update-plugins**
50+
- **webpack/v5/migrate-library-target-to-library-object**
51+
- **webpack/v5/json-imports-to-default-imports**
52+
53+
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).
54+
55+
3856
### Make sure your build has no errors or warnings
3957

4058
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
126144
}
127145
```
128146

147+
> **Note**: Codemod for this Chnages:
148+
>
149+
> ```bash
150+
> npx codemod set-target-to-false-and-update-plugins
151+
> ```
152+
>
153+
> (See the [registry here](https://codemod.com/registry/webpack-v5-set-target-to-false-and-update-plugins).)
154+
129155
- If you have output.library or output.libraryTarget defined, change the property names: (output.libraryTarget -> output.library.type, output.library -> output.library.name). Example
130156
131157
```json
@@ -148,6 +174,14 @@ If you were not able to upgrade some plugins/loaders to the latest in Upgrade we
148174
}
149175
```
150176
177+
> **Note**: Codemod for this Chnages:
178+
>
179+
> ```bash
180+
> npx codemod webpack/v5/migrate-library-target-to-library-object
181+
> ```
182+
>
183+
> (See the [registry here](https://codemod.com/registry/webpack-v5-migrate-library-target-to-library-object).)
184+
151185
If you were using WebAssembly via import, you should follow this two step process:
152186
153187
- 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';
204238
console.log(pkg.version);
205239
```
206240
241+
> **Note**: Codemod for this Chnages:
242+
>
243+
> ```bash
244+
> npx codemod codemod webpack/v5/json-imports-to-default-imports
245+
> ```
246+
>
247+
> (See the [registry here](https://codemod.com/registry/webpack-v5-json-imports-to-default-imports).)
248+
207249
#### Cleanup the build code
208250
209251
- When using `const compiler = webpack(...);`, make sure to close the compiler after using it: `compiler.close(callback);`.

0 commit comments

Comments
 (0)