So laden Sie alle Dateien in einem Verzeichnis mit webpack ohne require-Anweisungen

Habe ich eine große Menge von javascript-Dateien aufgeteilt in 4-Unterverzeichnis in meinem app. In grunt schnappe ich mir alle von Ihnen, und kompiliert Sie in eine Datei. Diese Dateien müssen nicht ein Modul.Export-Funktion.

Will ich mit webpack und teilen Sie es in 4 Teile. Ich will nicht auf manuell gehen und verlangen, dass alle meine Dateien.

Ich würde gerne ein plugin erstellen, dass auf die Zusammenstellung geht die directory-Bäume, dann packt alle .js-Datei-Namen und-Pfade, dann müssen alle Dateien in die Unterverzeichnisse und fügt es an die Ausgabe.

Ich soll alle Dateien in den einzelnen Verzeichnissen kompiliert in ein Modul, dann könnte ich verlangen von meinem Eintrag-point-Datei, oder auf das Vermögen, die http://webpack.github.io/docs/plugins.html erwähnt.

Beim hinzufügen einer neuen Datei, die ich will nur zu legen Sie es in das richtige Verzeichnis und wissen, dass es enthalten sein wird.

Gibt es eine Möglichkeit, dies zu tun mit webpack oder ein plugin, dass jemand geschrieben hat, dies zu tun?

InformationsquelleAutor ChickenFur | 2015-04-02

98

Dies ist, was ich getan habe, dies zu erreichen:
```
function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('./modules/', true, /\.js$/));
```
- Gibt es eine Möglichkeit, um anzugeben, welche loader zu verwenden? Mein Anwendungsfall ist, dass ich verwenden möchten, die image-size-loader für alle Bilder in der Reihenfolge zu erstellen, die Platzhalter mit den richtigen Seitenverhältnissen.
- könnten Sie Sie Probe arbeiten webpack.config.js
- Dies funktionierte perfekt für mich. Danke @splintor
- Sie können die loader in der config-Datei: loaders: [ { test: /\.json$/, loader: 'json' } ]. { test: /\.json$/, loader: 'json' } fügt die json-loader für .json-Dateien, solange Sie installiert haben, in der loader.
- Beachten Sie, dass wenn Sie versuchen zu TROCKEN sein, hier durch das schreiben einer Funktion, die Anrufe require.context(...) für Sie (z.B. wenn Sie versuchen, zu verlangen, alles in mehreren Ordnern), webpack wirft eine Warnung. Die Argumente, die require.context werden müssen compile-time-Konstanten.
- Für alle, die verwirrt ist von dieser Antwort.. Es ist gerade von: npmjs.com/package/require-context 's Beispiel, @splintor nur geändert werden die Funktionen name, ich denke, das ist, warum er nicht mit Links mehr Informationen, auch tho es angefordert wurde.
- href="https://www.npmjs.com/package/require-context" >npmjs.com/package/require-context entstand im Jahr 2017 und meine Antwort ist ab 2015, so ist es schwer zu sagen, es ist gerade von dort. Beachten Sie auch, dass require-context ist ein wrapper um webpack, und dessen Probe entnommen webpack's-Dokumentation unter webpack.js.org/guides/dependency-management/#context-module-api wurde Hinzugefügt 2016 (in github.com/webpack/webpack.js.org/commit/...), auch nachdem ich schrieb meine Antwort... Vielleicht webpack Autoren geprägt wurden, meine Antwort. Beachten Sie, dass Sie es erweitert haben cache.
InformationsquelleAutor splintor
36

In meinem app-Datei landete ich setzen die erfordern
```
require.context(
  "./common", //context folder
  true, //include subdirectories
  /.*/// RegExp
)("./" + expr + "")
```
mit freundlicher Genehmigung von diesem post: https://github.com/webpack/webpack/issues/118

Ist es jetzt hinzufügen alle meine Dateien. Ich habe einen loader für html und css und es scheint zu funktionieren groß.
- Was ist expr in diesem Beispiel?
- expr ist ein Pfad auf eine Datei im Kontext-Ordner. also, wenn Sie brauchen, um dies zu tun, nicht nur für die Forderung, dass alle html-Dateien ist dies sinnvoll. webpack.github.io/docs/Kontext.html#context-Modul-api
- es ist mir noch immer unklar, was die expr argument hier tut, auch nach einem Blick auf das webpack docs. was bedeutet "tun dies nicht nur für die Forderung, dass alle html-Dateien" gemeint? danke
- Es ist das gleiche wie var req=erforderlich.Kontext("./common", true, /.*/); req("./" + expr + "")
- Ich habe Uncaught ReferenceError: expr ist nicht definiert. Jede Andeutung darüber?
- möglicherweise hängt es mit diesem: webpack.github.io/docs/Kontext.html#parser-Bewertung. Meine Vermutung ist, dass exp ist ein Platzhalter für einen einfachen Ausdruck, dass webpack versteht. Aber ich könnte falsch sein ...
- Noch keine Antwort was expr bedeutet hier
InformationsquelleAutor ChickenFur

Wie etwa eine Karte, alle Dateien in einem Ordner?

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

Hierzu:

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

Dank Drop in diesem Beispiel. Ich benutzte Karte einfach wieder den Wert, dass jeder meine Dateien exportiert werden =).

InformationsquelleAutor Steven de Salas

Beispiel, wie man eine Karte aller Bilder im aktuellen Ordner.

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));

InformationsquelleAutor Alex K

0

diese funktioniert bei mir :
```
function requireAll(r) { r.keys().forEach(r); } 

requireAll(require.context('./js/', true, /\.js$/));
```
HINWEIS: dies kann erfordern .js-Dateien in Unterverzeichnisse von ./js/rekursiv.

InformationsquelleAutor jack long

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.