es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo cambiar el nombre de archivo dentro de una regla? (Vue CLI 5)

01 Jun, 2023 Programación

Tengo esta regla, utilizando “vue inspect”

/* config.module.rule('svg') */
          {
            test: /\.(svg)(\?.*)?$/,
            type: 'asset/resource',
            generator: {
              filename: 'img/[name][ext]'
            }
          },

Necesito cambiar el nombre del archivo, por ejemplo, a “[contenthash][ext]”, pero no puedo hacerlo usando

module.exports = defineConfig({
    chainWebpack: (config) => {
    config.module.rule("svg").generator.filename = "[contenthash][ext]";
      },
    })

porque no puedo establecer “generator”, puedo reescribir todas las reglas usando

module.exports = defineConfig({
    configureWebpack: (config) => {
    config.module.rules = [
          {
            test: /\.(svg)(\?.*)?$/,
            use: [
              {
                loader: "svg-inline-loader",
                options: {
                  name: "[contenthash].[ext]",
                },
              },
            ],
          },
        ];
    },
  })

pero necesito que otras reglas existan… entonces, ¿cómo puedo cambiar el nombre de archivo del svg?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como se menciona en la pregunta, no es posible establecer directamente la propiedad filename del generator usando chainWebpack en Vue CLI 5. Sin embargo, una solución alternativa es usar el método rule.merge para fusionar las propiedades de la regla:

    module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .merge({
        generator: {
          filename: 'img/[contenthash][ext]'
        }
      })
  }
}

    Esto actualizará la propiedad filename del objeto generator mientras se preservan las demás propiedades de la regla.

Comments are closed.