寻求可移除webfonts-loader生成的冗余CSS伪类的Webpack后处理插件

刚好我之前也碰到过类似的需求——webfonts-loader默认会为每个SVG图标生成.icon-xxx:before这类CSS规则，但如果你的字体支持连字特性，这些规则完全是冗余的。下面提供两种可行的方案来自动移除这些代码：

方案一：自定义Webpack插件 #

这个方案直接在Webpack的资源输出阶段修改生成的CSS文件，逻辑简单直接：

1. 编写自定义插件 #

创建一个RemoveWebfontIconClassesPlugin.js文件，内容如下：

class RemoveWebfontIconClassesPlugin {
  constructor(options = {}) {
    // 允许自定义匹配的CSS文件名，默认匹配icons.css
    this.options = { test: /icons\.css$/, ...options };
  }

  apply(compiler) {
    // 监听Webpack的emit钩子，此时资源已生成但还未写入磁盘
    compiler.hooks.emit.tapAsync('RemoveWebfontIconClassesPlugin', (compilation, callback) => {
      // 遍历所有生成的资源文件
      Object.keys(compilation.assets).forEach(assetName => {
        // 匹配目标CSS文件
        if (this.options.test.test(assetName)) {
          const oldCSS = compilation.assets[assetName].source();
          // 用正则移除所有.icon-xxx:before的规则
          const regexp = /\.[a-z\-]+:before\s\{[^}]+}\s*/mg;
          const newCss = oldCSS.replace(regexp, '');
          // 更新资源内容
          compilation.assets[assetName] = {
            source: () => newCss,
            size: () => newCss.length
          };
        }
      });
      callback();
    });
  }
}

module.exports = RemoveWebfontIconClassesPlugin;

2. 在Webpack配置中使用 #

在你的webpack.config.js里引入并使用这个插件：

const RemoveWebfontIconClassesPlugin = require('./RemoveWebfontIconClassesPlugin');

module.exports = {
  // ...其他Webpack配置项
  plugins: [
    // ...已有的其他插件
    new RemoveWebfontIconClassesPlugin({
      // 可选：如果你的字体CSS文件名不是icons.css，这里自定义正则
      test: /custom-font-name\.css$/
    })
  ]
};

方案二：用PostCSS插件处理（更优雅的CSS处理方式） #

如果你项目中已经在用PostCSS，这个方案会更贴合CSS工作流：

1. 编写自定义PostCSS插件 #

创建postcss-remove-webfont-icons.js文件：

module.exports = () => {
  return {
    postcssPlugin: 'postcss-remove-webfont-icon-classes',
    // 遍历所有CSS规则
    Rule(rule) {
      // 匹配所有以.icon-xxx:before结尾的选择器规则
      if (rule.selector && rule.selector.match(/\.[a-z\-]+:before$/)) {
        rule.remove(); // 移除该规则
      }
    }
  };
};

2. 配置PostCSS-loader #

在Webpack的CSS规则中添加postcss-loader并引入自定义插件：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  // 引入自定义插件
                  require('./postcss-remove-webfont-icons'),
                  // 可以继续添加其他PostCSS插件，比如autoprefixer
                  // require('autoprefixer')
                ]
              }
            }
          }
        ]
      }
    ]
  }
};

两种方案对比 #

• 自定义Webpack插件：直接操作生成的资源包，适合只需要处理特定字体CSS文件的场景，不需要额外依赖PostCSS。
• PostCSS方案：更符合CSS工程化的最佳实践，能和其他PostCSS工具（如自动前缀、CSS压缩等）配合使用，扩展性更强。

无论选哪种方案，最终都能自动移除那些冗余的.icon-xxx:before规则，让你可以用更简洁的连字方式使用图标：

<i class="icon">add-to-list</i>

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