Webpack打包后如何删除输出的index.js及冗余JS/CSS文件？

我完全懂你的痛点——把JS和CSS都内联到HTML之后，那些单独生成的.js和.css文件就彻底没用了，留着反而占空间。CleanWebpackPlugin确实不适合这个场景，它主要是用来清理整个输出目录或者预定义的静态文件，没法精准处理这种内联后残留的冗余文件。这里给你几个靠谱的解决方案：

解决方案1：使用remove-files-webpack-plugin（推荐） #

这个插件专门用来在Webpack编译流程中删除指定文件，配置灵活，能精准匹配你要删掉的冗余JS/CSS。

步骤1：安装插件 #

npm install remove-files-webpack-plugin --save-dev
# 或者用yarn
yarn add remove-files-webpack-plugin -D

步骤2：修改Webpack配置 #

在你的webpack.config.js中引入并配置插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const RemoveFilesPlugin = require('remove-files-webpack-plugin');

module.exports = {
  // 你的其他Webpack配置（entry、output等）
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      inlineSource: '.(js|css)$' // 匹配要内联的JS和CSS文件
    }),
    new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
    new RemoveFilesPlugin({
      // 编译完成后执行删除操作
      after: {
        // 指定要删除的文件路径（匹配输出目录下的所有JS/CSS）
        include: [
          './dist/*.js',
          './dist/*.css'
        ],
        // 务必排除你的HTML文件，避免误删！
        exclude: [
          './dist/index.html'
        ]
      }
    })
  ]
};

注意事项 #

• 根据你实际的输出目录（比如如果不是dist）调整路径
• 如果有个别JS/CSS不需要删除，可以在exclude里添加对应文件路径

解决方案2：自定义Webpack插件 #

如果不想引入第三方插件，也可以自己写一个极简的自定义插件，利用Webpack的钩子实现删除逻辑：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const fs = require('fs');
const path = require('path');

// 自定义删除插件
class RemoveUnusedAssetsPlugin {
  apply(compiler) {
    // 在Webpack编译完成后触发钩子
    compiler.hooks.done.tap('RemoveUnusedAssetsPlugin', (stats) => {
      const outputDir = stats.compilation.outputOptions.path;
      
      // 读取输出目录下的所有文件
      fs.readdir(outputDir, (err, files) => {
        if (err) throw err;
        files.forEach(file => {
          // 只删除.js和.css后缀的文件
          if (file.endsWith('.js') || file.endsWith('.css')) {
            const filePath = path.join(outputDir, file);
            fs.unlink(filePath, (err) => {
              if (err) console.error(`删除文件失败：${file}`, err);
              else console.log(`已删除冗余资源：${file}`);
            });
          }
        });
      });
    });
  }
}

module.exports = {
  // 其他Webpack配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      inlineSource: '.(js|css)$'
    }),
    new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
    new RemoveUnusedAssetsPlugin()
  ]
};

这个插件的好处是完全可控，你可以根据需求修改判断逻辑（比如只删除特定名称的文件）。

额外小提示（Webpack 5可选） #

如果你用的是Webpack 5，可以尝试通过Asset Modules配置让Webpack直接把JS/CSS内联，不生成单独文件，但这种方式会把资源转成Base64格式，可能不符合你想要的原生代码内联需求，所以仅做参考。

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