升级Webpack 5后仍调用extract-text-webpack-plugin的问题求助

调用来源分析 #

Child extract-text-webpack-plugin的出现主要有三个核心原因：

• Webpack缓存残留：Webpack5的文件系统缓存会保留旧编译配置，即使你已经移除插件引用，缓存中的旧逻辑仍会触发该插件的调用。
• 第三方依赖间接引入：你项目中使用的angular2@2.0.0-beta.15是极其早期的版本，这类旧依赖可能内置了适配Webpack3及以下的构建逻辑，间接调用了extract-text-webpack-plugin。
• Bootstrap版本不匹配：当前安装的bootstrap@5.3.3已不再提供Less源码（Bootstrap从v5开始仅支持Sass），报错中找不到的bootstrap.less文件本身就不存在，这是触发错误链的直接原因。

分步解决 #

1. 彻底清理Webpack缓存 #

执行命令清理缓存目录：

# macOS/Linux
rm -rf node_modules/.cache/webpack

# Windows
rd /s /q node_modules\.cache\webpack

也可以在webpack配置中临时关闭缓存验证，强制全量编译：

cache: {
  type: 'filesystem',
  buildDependencies: { config: [__filename] },
  cacheUnaffected: false,
}

2. 修复Bootstrap样式文件问题 #

有两种方案可选：

• 降级到支持Less的Bootstrap版本：安装最后一个稳定的Less版本Bootstrap3：

  npm uninstall bootstrap
  npm install bootstrap@3.4.1
  

• 切换到Sass生态：替换Less工具链为Sass：

  npm uninstall less less-loader
  npm install sass sass-loader
  

  同时修改webpack配置中的样式规则为Sass适配：

  module: {
    rules: [
      // ...其他文件处理规则
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }
    ]
  }
  

  最后将项目中所有.less文件重命名为.scss，调整语法适配Sass规范。

3. 排查并移除间接依赖的extract-text-webpack-plugin #

执行命令找出哪个依赖引入了该插件：

npm ls extract-text-webpack-plugin

如果发现有依赖间接引入，可通过以下方式处理：

• 升级该依赖到适配Webpack5的版本；
• 在package.json中添加overrides强制排除或替换：

  {
    "overrides": {
      "extract-text-webpack-plugin": "npm:mini-css-extract-plugin@^2.9.1"
    }
  }
  

4. 补全Webpack样式处理配置 #

当前配置中.css和.less的loader规则被注释，导致Webpack无法处理样式文件，需用mini-css-extract-plugin完成替换：
首先在配置顶部引入插件：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

然后更新module.rules和plugins：

module: {
  rules: [ // Webpack5使用rules替代旧的loaders
    // ...图片、字体等规则保留
    {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader']
    },
    {
      test: /\.less$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
    }
  ]
},
plugins: [
  // ...其他插件保留
  new MiniCssExtractPlugin({
    filename: '[name].css'
  })
]

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