使用Webpack 4运行命令时出现Class extends构造函数错误求助

Hey there, let's tackle this frustrating Webpack 4 error you're hitting. That Class extends value undefined is not a constructor or null message almost always ties to version mismatches between Webpack 4 and its associated tools/plugins—even if you fixed some CLI issues already. Here's a step-by-step breakdown to get you sorted:

1. Double-Check Your Webpack CLI Version #

Webpack 4 requires webpack-cli@3.x exclusively—any version 4 or higher is built for Webpack 5, which will throw this exact error when paired with Webpack 4. Even if you thought you fixed the CLI, it's worth verifying:

First, uninstall any existing CLI:

npm uninstall webpack-cli --save-dev
# Or if using yarn:
yarn remove webpack-cli --dev

Then install the compatible version:

npm install webpack-cli@3.3.12 --save-dev
# Yarn alternative:
yarn add webpack-cli@3.3.12 --dev

2. Audit Plugin/Loader Compatibility #

Many popular loaders and plugins released after 2021 target Webpack 5 by default, which will break Webpack 4 setups. Here are common culprits and their compatible versions:

• babel-loader: Use ^8.x.x (v9+ requires Webpack 5)
• css-loader: Stick to ^5.x.x (v6+ is Webpack 5-only)
• style-loader: Use ^2.x.x or ^3.x.x (v4+ needs Webpack 5)
• html-webpack-plugin: Go with ^4.x.x (v5+ is for Webpack 5)

Run this command to check for nested Webpack 5 dependencies that might be sneaking in:

npm ls webpack
# Or yarn:
yarn list webpack

If you see any webpack@5.x entries, trace them back to the plugin/loader causing it and downgrade that package.

3. Inspect Your Webpack Config for Invalid Extends #

Sometimes the error comes from your own webpack.config.js—check if you're trying to extend a class that's been removed or renamed in Webpack 4. For example:

• If you're using a custom plugin that extends webpack.Plugin, make sure that's correctly referenced (Webpack 4 uses compiler.plugin() rather than the newer hooks API in some cases, but that's less likely to cause this specific error).
• Avoid any imports from deprecated Webpack modules that no longer export the class you're trying to extend.

4. Clean Dependencies and Cache Corruption #

Corrupted node_modules or lock files can cause weird version mismatches even if your package.json looks correct. Do a full reset:

1. Delete node_modules folder
2. Delete package-lock.json (or yarn.lock)
3. Run npm install (or yarn install) to rebuild dependencies fresh

内容的提问来源于stack exchange，提问作者Taylor Austin