Hay 2 preguntas:

Usando webpack, cómo:

1. Agrupe varias páginas/vistas html en una carpeta para que terminemos con la misma estructura de carpetas antes de agrupar (más explicado más adelante)
2. Agrupe 2 archivos ( main.js y main.css ) e inyéctelos en cada salida html

Para la primera pregunta, se puede usar glob para hacer coincidir patrones y obtener las carpetas que contienen las entradas. Pero, ¿es posible automatizar el proceso de agrupación de paquetes web utilizando alguna función que recorre cada carpeta y agrupa su contenido en una carpeta con el mismo nombre?

Esta es la estructura de carpetas antes de agrupar:

 src js main.js css main.css views home home.html home.js home.css about about.html about.js about.css

Esta es la estructura de carpetas deseada después de agrupar:

 dist js main.js css main.css home index.html index.js index.css about index.html index.js index.css

`home/home.html' y 'about/about.html' deberían inyectar el script 'main.js' y la hoja de estilo 'main.css'

Configuración actual del paquete web:

 module.exports = { entry: { home: [ "./src/js/main.js", "./src/css/main.css", "./src/views/home/index.js", "./src/views/home/index.css", ], }, output: { filename: "[name].[contenthash].js", path: path.resolve(__dirname, "dist"), clean: true, }, plugins: [ new HtmlWebpackPlugin({ filename: "index.html", inject: true, template: path.resolve(__dirname, "src/views/home", "index.html"), }), ] }