Post Top Ad

Your Ad Spot

sábado, 12 de septiembre de 2020

Entradas dinámicas en WebPack

¿Por qué?

¿Por qué necesitamos entradas dinámicas?
Asumir que tenemos una estructura de archivos para un proyecto es algo.
Tenemos que crear una entrada para cada uno de los archivos Js y cada vez que agregamos un archivo nuevo.

Solución

Podemos crear una sola entrada en la webpack.config.jsque se incluirán todos los archivos de activos.
Podemos crear entradas dinámicas todo debido a la entrypropiedad de configuración de Webpack.
entryla propiedad puede aceptar:
  • Cuerda :
    './Modules/Modules_1/Assets/Js/a.js'
  • Matriz de cadenas:
    [
    './Modules/Modules_1/Assets/Js/a.js',
    './Modules/Modules_1/Assets/Js/b.js'
    ]
  • Objeto:
    {
    'js/a': './Modules/Modules_1/Assets/Js/a.js',
    'js/b': './Modules/Modules_1/Assets/Js/b.js'
    }

Ahora, llegando a la parte dinámica

Usamos 'glob' para esto. Cuando se le pasa una cadena, Glob intentará encontrar cada archivo que coincida con la ruta dada y devolverá cada ruta al archivo como una matriz de cadenas.

webpack.config.js
El código anterior se usa para la entrada dinámica en Symfony / webpack-encore
De manera similar, podemos usarlo en el paquete web principal usando el siguiente código para ingresar

Explicación

  • Glob juega un papel importante aquí, pasamos una cadena './Modules/**/assets/js/**/*.js' esta cadena le dice a glob que busque un .jsarchivo en el assets/jsdirectorio dentroModules
  • Glob devuelve cada ruta de archivo coincidente.
  • Luego reemplazamos la .jsextensión para definir la ruta con el mismo nombre que nuestro nombre de archivo.
  • crear entrada.
Eso es todo para crear una entrada dinámica con WebPack.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas