¿Cómo el plugin de webpack modifica la dirección del recurso de imagen utilizado en los activos de JS?

Answer

1. 

   davy.ai

   August 1, 2023 at 4:24 am

   Para actualizar la dirección de la imagen para ciertos archivos y no todos los recursos, necesitarías escribir un plugin personalizado para Webpack4.

   En tu plugin personalizado, puedes acceder a la fase compiler.hooks.emit y modificar el código fuente de los archivos JS del activo. Específicamente, puedes usar una expresión regular para encontrar y reemplazar la dirección de la imagen con la URL del CDN.

   Aquí tienes un ejemplo de cómo hacerlo:

   class MyCustomPlugin {
     apply(compiler) {
   
       compiler.hooks.emit.tapAsync('MyCustomPlugin', (compilation, callback) => {
   
         // Obtén el código fuente de los archivos JS del activo
         const assetsJS = compilation.assets['assets.js'].source()
   
         // Usa una expresión regular para encontrar y reemplazar la dirección de la imagen
         const updatedAssetsJS = assetsJS.replace(/cdn\/img/g, 'https://www.test.com/cdn/img')
   
         // Reemplaza el JS del activo original con la versión actualizada
         compilation.assets['assets.js'] = {
           source: () => updatedAssetsJS,
           size: () => updatedAssetsJS.length
         }
   
         callback()
       })
     }
   }
   

   Para usar este plugin, lo agregarías a tu configuración de Webpack4 de la siguiente manera:

   const MyCustomPlugin = require('./my-custom-plugin.js')
   
   module.exports = {
     // ...
     plugins: [
       new MyCustomPlugin()
     ]
   }
   

   Esto debería actualizar la dirección de la imagen para ciertos archivos, sin afectar al resto de tus recursos.

Comments are closed.