Webpack 5 IgnorePlugin无法过滤仅构建CSS时输出的JS文件怎么解决？

首先明确：IgnorePlugin的作用是阻止webpack打包指定规则的引入模块，不会干预最终输出文件的生成逻辑，所以你当前的配置无法实现需求，可参考以下方案实现：

方案1：output文件名条件控制（无额外依赖，优先推荐） #

通过output.filename的函数语法区分文件输出路径，非admin的JS文件统一输出到临时目录，构建后统一清理即可：

// webpack.config.js
module.exports = {
  // 其余原有配置保持不变
  output: {
    filename: (pathData) => {
      // admin相关JS直接输出到根目录
      if (pathData.chunk.name === 'admin') return '[name].js'
      // 其余JS输出到临时目录，后续可直接删除整个目录
      return 'temp/[name].js'
    },
    clean: true // 自动清理上一次构建的冗余文件
  }
}

方案2：第三方插件直接过滤输出 #

使用remove-files-webpack-plugin直接在构建完成后删除符合规则的冗余文件：

1. 安装依赖

npm install remove-files-webpack-plugin --save-dev

2. 配置插件

// webpack.config.js
const RemoveFilesPlugin = require('remove-files-webpack-plugin')

module.exports = {
  // 其余原有配置保持不变
  plugins: [
    // 其余原有插件保持不变
    new RemoveFilesPlugin({
      after: {
        root: './dist', // 替换为你的实际构建输出目录路径
        include: [/\.js$/], // 匹配所有JS后缀文件
        exclude: ['admin.js'] // 保留admin.js不删除
      }
    })
  ]
}

方案3：webpack原生钩子实现（无额外依赖） #

不想安装第三方插件的情况下，直接调用webpack的构建完成钩子，手动删除冗余JS文件：

// webpack.config.js
const fs = require('fs')
const path = require('path')
const webpack = require('webpack')

module.exports = {
  // 其余原有配置保持不变
  plugins: [
    // 其余原有插件保持不变
    {
      apply: (compiler) => {
        compiler.hooks.done.tap('RemoveRedundantJs', () => {
          const outputDir = compiler.options.output.path
          fs.readdirSync(outputDir).forEach(file => {
            // 匹配根目录下非admin的JS文件直接删除
            if (file.endsWith('.js') && file !== 'admin.js') {
              fs.unlinkSync(path.resolve(outputDir, file))
            }
          })
        })
      }
    }
  ]
}

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