webentwicklung-frage-antwort-db.com.de

So laden Sie alle Dateien in einem Verzeichnis mithilfe von webpack, ohne dass dazu Anweisungen erforderlich sind

Ich habe eine große Anzahl von Javascript-Dateien, die in meiner App in 4 Unterverzeichnisse aufgeteilt sind. In grunzer packe ich alle und kompiliere sie in einer Datei. Diese Dateien haben keine module.exports-Funktion.

Ich möchte Webpack verwenden und es in 4 Teile teilen. Ich möchte nicht manuell reingehen und benötige alle meine Dateien.

Ich möchte ein Plugin erstellen, das beim Kompilieren die Verzeichnisbäume durchläuft, dann alle .js-Dateinamen und -pfade erfasst, dann alle Dateien in den Unterverzeichnissen benötigt und der Ausgabe hinzufügt. 

Ich möchte, dass alle Dateien in den einzelnen Verzeichnissen zu einem Modul kompiliert werden, das ich dann von meiner Einstiegspunktdatei anfordern könnte oder in die Assets die http://webpack.github.io/docs/plugins.html mentions einbezieht.

Beim Hinzufügen einer neuen Datei möchte ich sie einfach im richtigen Verzeichnis ablegen und weiß, dass sie hinzugefügt wird.

Gibt es eine Möglichkeit, dies mit Webpack oder einem Plugin zu tun, das jemand geschrieben hat, um dies zu tun?

javascriptbuildwebpack
83
ChickenFur

Das habe ich getan, um dies zu erreichen:

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

In meiner App-Datei habe ich die Anforderung gesetzt 

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

mit freundlicher Genehmigung dieses Beitrags: https://github.com/webpack/webpack/issues/118

Jetzt werden alle meine Dateien hinzugefügt. Ich habe einen Loader für HTML und CSS und es scheint großartig zu funktionieren.

38
ChickenFur

Wie wäre es mit einer Karte aller Dateien in einem Ordner?

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

Mach das:

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, /.*/));
3
Steven de Salas

das funktioniert für mich:

function requireAll(r) { r.keys().forEach(r); } 

requireAll(require.context('./js/', true, /\.js$/));

HINWEIS: Dies kann erfordern, dass .js-Dateien rekursiv in.

0
jack long

Beispiel, wie Sie eine Karte aller Bilder im aktuellen Ordner erhalten.

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));
0
Alex K