javascript - servidor - Cómo cargar todos los archivos en un directorio usando webpack sin requerir declaraciones

mostrar el listado de archivos de un directorio en php

Question

Tengo una gran cantidad de archivos javascript divididos en 4 subdirectorios en mi aplicación. En gruñido los agarro a todos y los compilo en un solo archivo. Estos archivos no tienen una función module.exports.

Quiero usar webpack y dividirlo en 4 partes. No quiero entrar manualmente y requerir todos mis archivos.

Me gustaría crear un complemento que en la compilación recorra los árboles de directorios, luego tome todos los nombres y rutas de archivos .js, luego requiera todos los archivos en los subdirectorios y los agregue a la salida.

Quiero que todos los archivos de cada directorio se compilen en un módulo que luego pueda requerir de mi archivo de punto de entrada, o incluir en los activos que http://webpack.github.io/docs/plugins.html menciona.

Al agregar un nuevo archivo, solo quiero colocarlo en el directorio correcto y saber que se incluirá.

¿Hay alguna manera de hacer esto con webpack o un complemento que alguien ha escrito para hacer esto?

Answer 1

¿Qué tal un mapa de todos los archivos en una carpeta?

// {
// ''./image1.png'': ''data:image/png;base64,iVBORw0KGgoAAAANS'',
// ''./image2.png'': ''data:image/png;base64,iVBP7aCASUUASf892'',
// }

Hacer esto:

const allFiles = (ctx => {
let keys = ctx.keys();
let values = keys.map(ctx);
return keys.reduce((o, k, i) => { o[k] = values[i]; return o; }, {});
})(require.context(''./path/to/folder'', true, /.*/));

Answer 2

Ejemplo de cómo obtener un mapa de todas las imágenes en la carpeta actual.

const IMAGES_REGEX = //.(png|gif|ico|jpg|jpeg)$/;
function mapFiles(context) {
const keys = context.keys();
const values = keys.map(context);
return keys.reduce((accumulator, key, index) => ({
...accumulator,
[key]: values[index],
}), {});
}
const allImages = mapFiles(require.context(''./'', true, IMAGES_REGEX));

Answer 3

En mi archivo de aplicación terminé poniendo el requerimiento

require.context(
"./common", // context folder
true, // include subdirectories
/.*/ // RegExp
)("./" + expr + "")

cortesía de esta publicación: https://github.com/webpack/webpack/issues/118

Ahora está agregando todos mis archivos. Tengo un cargador para html y css y parece funcionar muy bien.

Answer 4

Esto es lo que hice para lograr esto:

function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context(''./modules/'', true, //.js$/));

Answer 5

esto funciona para mi:

function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context(''./js/'', true, //.js$/));

NOTA: esto puede requerir archivos .js en subdirecciones de ./js/ recursivamente.