How to add a rule to an existing one in vue.config.js?

Question

webpack

Good afternoon. How to add a new rule with resourceQuery to an already existing base loader in vue webpack config?

The simplest example of what this is for is an svg loader with a parameter. For example require('icon.svg') should return the path, and require('icon.svg?inline') should return the svg code.

Tried like this but it didn't work for some reason

vue.config.js code

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule("svg");

    svgRule
      .resourceQuery(/inline/)
      .use("svg-inline-loader")
      .loader("svg-inline-loader");
  }
};