Webpack5旧项目集成Tailwind v2报compiler.plugin is not a function错误

• 你当前安装的extract-text-webpack-plugin@3.0.2是仅适配Webpack 3的版本，其内部调用的compiler.plugin是Webpack 3时代的旧API，从Webpack 4开始官方就完全移除了这个接口，替换为基于Tapable的钩子系统，和你当前使用的Webpack 5.x版本完全不兼容，这就是触发TypeError: compiler.plugin is not a function的直接原因。
• 你当前配置同时注册了MiniCssExtractPlugin和ExtractTextPlugin两套CSS抽取逻辑，功能完全重复，本身就存在配置冗余。
• 之前参考官方文档没解决的核心原因是：extract-text-webpack-plugin从Webpack 4开始就进入维护停滞状态，3.x正式版仅兼容Webpack 3，官方已经不推荐在Webpack 5项目里使用这个插件，MiniCssExtractPlugin本身就是官方给出的完整替代方案。

1. 移除不兼容的旧插件 #

• 执行命令卸载完全无法适配的旧插件：npm uninstall extract-text-webpack-plugin
• 从webpack.config.js中删除所有和ExtractTextPlugin相关的引入、插件注册、loader调用逻辑，全局搜索代码里的ExtractTextPlugin关键字，确保没有残留引用。
• 你已经安装的mini-css-extract-plugin@1.5.0完全可以覆盖旧插件的所有功能，不需要额外替换其他依赖。

2. 重写SCSS/CSS处理的loader链 #

原配置的loader执行顺序存在逻辑颠倒，调整为适配Webpack 5 + Tailwind v2的正确顺序（loader遵循从右到左、从下到上的执行规则）：

// 替换原module.rules里的SCSS处理规则
{
  test: /\.(s[ac]|css)$/i,
  use: [
    // 开发环境用style-loader将CSS注入DOM，生产环境用MiniCssExtractPlugin抽离为独立CSS文件
    process.env.NODE_ENV === 'development' 
      ? 'style-loader' 
      : MiniCssExtractPlugin.loader,
    // 解析CSS内的@import、url()等资源引用
    'css-loader',
    // 执行PostCSS处理链：编译Tailwind指令、autoprefixer补全浏览器前缀、postcss-preset-env兼容新CSS语法
    'postcss-loader',
    // 将SCSS编译为原生CSS
    'sass-loader'
  ]
}

3. 补全Tailwind v2的必需配置 #

• 在项目根目录新增postcss.config.js，和你已安装的依赖完全匹配：

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-preset-env')
  ]
}

• 在项目根目录新增tailwind.config.js，将你项目内所有使用Tailwind类名的文件路径加入扫描规则（包括.tpl、.php模板文件），避免Tailwind误删未识别的类名：

module.exports = {
  content: [
    './src/**/*.{js,scss,css}',
    // 按你项目实际的模板存放路径调整
    './templates/**/*.tpl',
    './**/*.php'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 在你入口引入的SCSS文件中加入Tailwind的基础指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

• 彻底移除ExtractTextPlugin后如果还抛出"需要该插件"的提示，本质是代码中还残留着ExtractTextPlugin.extract()的调用逻辑，逐行检查SCSS规则的配置即可，不存在其他隐藏依赖。
• 抽离生成的独立CSS文件可以直接通过.tpl、.php模板里的link标签正常引入，和你项目现有的静态资源加载逻辑完全兼容，不需要做额外的模板改动。
• 原webpack配置里的MiniCssExtractPlugin输出文件名、入口、输出路径的逻辑完全可以保留，不需要调整。

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