Wie kopiere ich statische Dateien in das Build-Verzeichnis mit Webpack?

Question

Ich versuche, von Gulp zu Webpack zu wechseln. In Gulp habe ich eine Aufgabe, die alle Dateien und Ordner vom /static/-Ordner in den /build/-Ordner kopiert. Wie mache ich das gleiche mit Webpack? Brauche ich ein Plugin?

Answer 1

Die webpack-Konfigurationsdatei (in webpack 2) ermöglicht es Ihnen, eine Promise-Kette zu exportieren, solange der letzte Schritt ein webpack-Konfigurationsobjekt zurückgibt. Siehe Dokumentation zur Promise-Konfiguration. Von dort aus:

webpack unterstützt jetzt das Zurückgeben eines Promise aus der Konfigurationsdatei. Dadurch können Sie asynchrone Verarbeitung in Ihrer Konfigurationsdatei durchführen.

Sie könnten eine einfache rekursive Kopierfunktion erstellen, die Ihre Datei kopiert, und erst danach webpack auslöst. Bspw.:

module.exports = function(){
    return copyTheFiles( inpath, outpath).then( result => {
        return { entry: "..." } // Etc etc
    } )
}

Answer 2

Angenommen, alle Ihre statischen Ressourcen befinden sich in einem Ordner "static" auf der obersten Ebene und Sie möchten sie in den Build-Ordner kopieren, wobei die Struktur des Unterordners beibehalten wird, dann in Ihrer Einstiegsdatei) einfach

//index.js oder index.jsx

require.context("!!file?name=[path][name].[ext]&context=./static!../static/", true, /^\.\/.*\.*\*/);

Answer 3

In meinem Fall habe ich webpack für ein Wordpress-Plugin verwendet, um JS-Dateien zu komprimieren, wobei die Plugin-Dateien bereits komprimiert sind und daher den Prozess überspringen müssen.

optimization: {
    minimize: false,
},
externals: {
    "jquery": "jQuery",
},
entry: glob.sync('./js/plugin/**.js').reduce(function (obj, el) {
    obj[path.parse(el).name] = el;
    return obj
}, {}),
output: {
    path: path.resolve(__dirname, './js/dist/plugin'),
    filename: "[name].js",
    clean: true,
},

Das hat dazu gedient, die JS-Datei unverändert in den Build-Ordner zu kopieren. Die Verwendung anderer Methoden wie file-loader und copy-webpack führt zu Problemen.

Hoffentlich hilft es jemandem.