How to alter a rule with Vue-cli?

Question

From vue-inspect I can read this:

  /* config.module.rule('fonts') */
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
    use: [
      /* config.module.rule('fonts').use('url-loader') */
      {
        loader: 'url-loader',
        options: {
          limit: 4096,
          fallback: {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[ext]'
            }
          }
        }
      }
    ]
  },

I would like to change the option name to '[name].[ext]' to remove the prefix fonts/.

I am really struggling to see how I can alter the property without deleting all other options:

  chainWebpack: config => {
    const fontRule = config.module.rule('fonts').use('url-loader')
    fontRule.options({name: 'prout/[name].[ext]'})
  }

It seems everything is in store, but according to webpack-chain manual,

Answer 1

Looking at the vue-cli docs it seems to me you can do the following ..

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('fonts')
      .use('url-loader')
        .loader('url-loader')
        .tap(options => {
          // modify the options...
          options.fallback.options.name = '[name].[ext]'

          return options
        })
  }
}