如何使用Webpack Clean保留多个目录？

你遇到的核心问题是重复声明keep属性导致前一个规则被覆盖，而数组写法可能未按正确格式传入。以下是三种可行的实现方式：

方式一：使用多匹配正则表达式 #

通过正则的|运算符同时匹配多个目录：

module.exports = {
  //...
  output: {
    clean: {
      keep: /ignored\/dir\/|ignored2\//,
    },
  },
};

方式二：传入正则数组（Webpack 5.20.0+支持） #

直接将多个正则规则放在数组中，Webpack会依次匹配：

module.exports = {
  //...
  output: {
    clean: {
      keep: [/ignored\/dir\//, /ignored2\//],
    },
  },
};

方式三：自定义判断函数（适配复杂场景） #

如果需要更灵活的保留逻辑，可传入一个函数，返回true即保留对应文件/目录：

module.exports = {
  //...
  output: {
    clean: {
      keep: (filename) => {
        return filename.includes('ignored/dir/') || filename.includes('ignored2/');
      },
    },
  },
};

注意：对象中重复声明keep会覆盖前值，必须只写一次keep属性，再通过上述方式传入多规则。

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