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

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

Quiero usar el paquete web y dividirlo en 4 partes. No quiero entrar manualmente y solicitar 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 archivo .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 podría requerir de mi archivo de punto de entrada, o incluirlo en los activos que menciona http://webpack.github.io/docs/plugins.html .

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

¿Hay alguna forma de hacer esto con un paquete web o un complemento que alguien haya escrito para hacer esto?

Esto es lo que hice para lograrlo:

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

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

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.

¿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, /.*/));

Ejemplo de cómo obtener un mapa de todas las imágenes de 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));

Todos los méritos para @splintor (gracias).

Pero aquí está mi propia versión derivada.

Beneficios:

• Los módulos que se exportan se agrupan en un {module_name: exports_obj}objeto.
  • module_name se crea a partir de su nombre de archivo.
  • ... sin extensión y reemplazando barras inclinadas por guiones bajos (en caso de escaneo de subdirectorios).
• Se agregaron comentarios para facilitar la personalización.
  • Es decir, es posible que desee no incluir archivos en subdirectorios si, por ejemplo, están allí para ser requeridos manualmente para módulos de nivel raíz .

EDITAR: Si, como yo, está seguro de que sus módulos no devolverán nada más que (al menos en el nivel raíz) un objeto javascript normal, también puede "montarlos" replicando su estructura de directorio original (consulte Código (Versión profunda) ) sección al final).

Código (versión original):

function requireAll(r) {
    return Object.fromEntries(
        r.keys().map(function(mpath, ...args) {
            const result =  r(mpath, ...args);
            const name = mpath
                .replace(/(?:^[.\/]*\/|\.[^.]+$)/g, '') // Trim
                .replace(/\//g, '_') // Relace '/'s by '_'s
            ;
            return [name, result];
        })
    );
};
const allModules = requireAll(require.context(
    // Any kind of variables cannot be used here
    '@models'  // (Webpack based) path
    , true     // Use subdirectories
    , /\.js$/  // File name pattern
));

Ejemplo:

Salida de muestra para eventual console.log(allModules);:

{
  main: { title: 'Webpack Express Playground' },
  views_home: {
    greeting: 'Welcome to Something!!',
    title: 'Webpack Express Playground'
  }
}

Árbol de directorio:

models
├── main.js
└── views
    └── home.js

Código (versión profunda):

function jsonSet(target, path, value) {
    let current = target;
    path = [...path]; // Detach
    const item = path.pop();
    path.forEach(function(key) {
        (current[key] || (current[key] = {}));
        current = current[key];
    });
    current[item] = value;
    return target;
};
function requireAll(r) {
    const gather = {};
    r.keys().forEach(function(mpath, ...args) {
        const result =  r(mpath, ...args);
        const path = mpath
            .replace(/(?:^[.\/]*\/|\.[^.]+$)/g, '') // Trim
            .split('/')
        ;
        jsonSet(gather, path, result);
    });
    return gather;
};
const models = requireAll(require.context(
    // Any kind of variables cannot be used here
    '@models'  // (Webpack based) path
    , true     // Use subdirectories
    , /\.js$/  // File name pattern
));

Ejemplo:

Resultado del ejemplo anterior usando esta versión:

{
  main: { title: 'Webpack Express Playground' },
  views: {
    home: {
      greeting: 'Welcome to Something!!',
      title: 'Webpack Express Playground'
    }
  }
}

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/ de forma recursiva.