New
Codemod Registry
Explore community-led codemods to migrate, optimize, and transform your codebase.
Ready to contribute?
Build your own codemod and share it with the community.
Explore community-led codemods to migrate, optimize, and transform your codebase.
Build your own codemod and share it with the community.
Explore community-led codemods to migrate, optimize, and transform your codebase.
This recipe is a set of codemods that will help migrate webpack v4 to v5. The recipe includes the following codemods: - webpack/v5/migrate-library-target-to-library-object - webpack/v5/json-imports-to-default-imports - webpack/v5/set-target-to-false-and-update-plugins
This codemod migrates imports from JSON modules that use named exports to use default exports instead. This codemod transforms named imports from JSON files into default imports, adhering to the new ECMAScript specification and Webpack v5 compatibility. Named imports from JSON modules are no longer supported. ## Example ### Before ```ts import { version } from "./package.json"; console.log(version); ``` ### After ```ts import pkg from "./package.json"; console.log(pkg.version); ``` , ### Before ```ts import { version, name, description } from "./package.json"; console.log(version, name, description); ``` ### After ```ts import pkg from "./package.json"; console.log(pkg.version, pkg.name, pkg.description); ``` , ### Before ```ts import { data } from './config.json'; console.log(data.nested.key, data.anotherKey); ``` ### After ```ts import config from './config.json'; console.log(config.data.nested.key, config.data.anotherKey); ``` , ### Before ```ts import { key1, key2 } from './config.json'; console.log(key1, key2); ``` ### After ```ts import config from './config.json'; console.log(config.key1, config.key2); ```
This codemod migrates the `output.library` and `output.libraryTarget` properties in Webpack configurations to the new format required by Webpack 5. It changes `output.library` to `output.library.name` and `output.libraryTarget` to `output.library.type`. ## Example ### Before ```ts module.exports = { output: { library: "MyLibrary", libraryTarget: "commonjs2", }, }; ``` ### After ```ts module.exports = { output: { library: { name: "MyLibrary", type: "commonjs2", }, }, }; ``` , ### Before ```ts module.exports = { output: { library: "MyLibrary", libraryTarget: "commonjs2", filename: "bundle.js", }, }; ``` ### After ```ts module.exports = { output: { library: { name: "MyLibrary", type: "commonjs2", }, filename: "bundle.js", }, }; ``` , ### Before ```ts module.exports = { output: { library: "MyLibrary", }, }; ``` ### After ```ts module.exports = { output: { library: { name: "MyLibrary", type: undefined, }, }, }; ``` , ### Before ```ts module.exports = { output: { library: "MyLibrary", libraryTarget: "umd", path: "./dist", }, }; ``` ### After ```ts module.exports = { output: { library: { name: "MyLibrary", type: "umd", }, path: "./dist", }, }; ```
This codemod migrates the `target` property in Webpack configurations from a function to `false` and moves the function to the `plugins` array. In Webpack 4, it was possible to set the `target` property to a function. However, in Webpack 5, this approach is no longer supported. Instead, the `target` should be set to `false`, and the function should be included in the `plugins` array. This codemod automates the transformation of Webpack configurations to adhere to the new specification. ## Example ### Before ```ts module.exports = { target: WebExtensionTarget(nodeConfig), }; ``` ### After ```ts module.exports = { target: false, plugins: [WebExtensionTarget(nodeConfig)], }; ``` , ### Before ```ts const WebExtensionTarget = require("webpack-extension-target"); module.exports = { target: WebExtensionTarget(nodeConfig), mode: "development", output: { filename: "bundle.js", }, }; ``` ### After ```ts const WebExtensionTarget = require("webpack-extension-target"); module.exports = { target: false, plugins: [WebExtensionTarget(nodeConfig)], mode: "development", output: { filename: "bundle.js", }, }; ``` , ### Before ```ts module.exports = { target: WebExtensionTarget(nodeConfig), optimization: { splitChunks: { chunks: "all", }, }, }; ``` ### After ```ts module.exports = { target: false, plugins: [WebExtensionTarget(nodeConfig)], optimization: { splitChunks: { chunks: "all", }, }, }; ``` , ### Before ```ts module.exports = { target: CustomTargetFunction(config), }; ``` ### After ```ts module.exports = { target: false, plugins: [CustomTargetFunction(config)], }; ```
Build your own codemod and share it with the community.