Webpack规则正则匹配：如何匹配.svg并排除.icon.svg文件？

刚好我之前处理过类似的场景，有两种靠谱的方案可以实现你的需求，选哪种取决于你的项目环境和偏好：

方案1：使用正则负向后瞻断言（精准匹配） #

如果你的项目环境支持ES2018+（现在绝大多数现代项目都满足），可以直接用正则的负向后瞻断言来精准排除.icon.svg文件：

// 匹配所有.svg文件，但排除.icon.svg结尾的文件
config.module.rules.push({
  test: /(?<!\.icon)\.svg$/,
  loader: 'vue-svg-loader'
});

// 你的.icon.svg专属规则保持不变
config.module.rules.push({
  test: /\.icon\.svg$/,
  // 这里替换成你需要的loader，比如file-loader等
  loader: 'file-loader'
});

正则解释： #

• (?<!\.icon)：这是负向后瞻断言，意思是"在当前位置的前面，绝对不能出现.icon这个字符串"
• \.svg$：确保文件是以.svg结尾

这样一来，所有.icon.svg的文件会被这个断言排除，只会匹配普通的.svg文件。

方案2：使用Webpack的exclude选项（兼容性更好，可读性更高） #

如果你担心正则高级特性的兼容性，或者更喜欢更直观的写法，直接用Webpack规则自带的exclude选项就可以：

// 匹配所有.svg文件，但排除.icon.svg
config.module.rules.push({
  test: /\.svg$/,
  exclude: /\.icon\.svg$/,
  loader: 'vue-svg-loader'
});

// .icon.svg的规则依旧保留
config.module.rules.push({
  test: /\.icon\.svg$/,
  loader: 'file-loader'
});

补充说明： #

Webpack会按照规则的顺序进行匹配，一旦某个文件匹配到了前面的规则，就不会再往后匹配。所以建议把.icon.svg的专属规则放在普通.svg规则的前面，这样逻辑更清晰（不过用exclude的话顺序其实不影响结果）。

内容的提问来源于stack exchange，提问作者Jan Franciszek Cieślak