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

Das Anfordern von Assets mit dem file-loader-Modul ist der Weg, den webpack vorgesehen hat, um verwendet zu werden (Quelle). Wenn Sie jedoch mehr Flexibilität benötigen oder eine sauberere Oberfläche wünschen, können Sie auch statische Dateien direkt mit meinem copy-webpack-plugin kopieren (npm, Github). Zum Beispiel für Ihr static zu build :

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    context: path.join(__dirname, 'your-app'),
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                { from: 'static' }
            ]
        })
    ]
};

---

Kompatibilitätshinweis: Wenn Sie eine alte Version von webpack wie webpack@4.x.x verwenden, verwenden Sie copy-webpack-plugin@6.x.x. Andernfalls verwenden Sie die neueste Version.

Answer 2

Sie müssen nicht alle Inhalte kopieren, webpack funktioniert anders als gulp. Webpack ist ein Modulbündler und alles, was Sie in Ihren Dateien referenzieren, wird inkludiert. Sie müssen nur einen Loader dafür angeben.

Also, wenn Sie Folgendes schreiben:

var myImage = require("./static/myImage.jpg");

Webpack wird zunächst versuchen, die referenzierte Datei als JavaScript zu parsen (weil das der Standard ist). Natürlich wird das fehlschlagen. Deshalb müssen Sie einen Loader für diesen Dateityp angeben. Der file- oder url-loader beispielsweise nehmen die referenzierte Datei, legen sie in den Ausgabeordner von webpack (der in Ihrem Fall build sein sollte) und geben die gehashte URL für diese Datei zurück.

var myImage = require("./static/myImage.jpg");
console.log(myImage); // '/build/12as7f9asfasgasg.jpg'

Normalerweise werden Loader über die webpack-Konfiguration angewendet:

// webpack.config.js

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/, loader: "file" }
        ]
    }
};

Natürlich müssen Sie zuerst den file-loader installieren, damit dies funktioniert.

Answer 3

Wenn Sie Ihre statischen Dateien kopieren möchten, können Sie den file-loader auf diese Weise verwenden:

für html-Dateien:

in webpack.config.js:

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(html)$/,
              loader: "file?name=[path][name].[ext]&context=./app/static"
            }
        ]
    }
};

In Ihrer JS-Datei:

  require.context("./static/", true, /^\.\/.*\.html/);

./static/ bezieht sich darauf, wo sich Ihre JS-Datei befindet.

Sie können dasselbe mit Bildern oder anderen Dateitypen tun. Der context ist eine leistungsstarke Methode zum Erkunden !!

Answer 4

Ein Vorteil, den das zuvor genannte copy-webpack-plugin mit sich bringt, der bisher nicht erklärt wurde, ist, dass alle anderen hier erwähnten Methoden immer noch die Ressourcen in Ihre Bündeldateien bündeln (und Sie dazu zwingen, sie an anderer Stelle zu "require" oder "importieren"). Wenn ich nur ein paar Bilder verschieben oder einige Vorlagenfragmente verschieben möchte, möchte ich meine JavaScript-Bündeldatei nicht mit nutzlosen Verweisen aufwerten, sondern die Dateien nur an der richtigen Stelle ausgeben. Ich habe keinen anderen Weg gefunden, dies in webpack zu tun. Zugegebenermaßen war das nicht das, wofür webpack ursprünglich konzipiert wurde, aber es ist definitiv ein aktueller Anwendungsfall. (@BreakDS Ich hoffe, das beantwortet deine Frage - es ist nur ein Vorteil, wenn du es willst)

Answer 5

Webpack 5 fügt Asset-Module hinzu, die im Wesentlichen Ersatz für gängige Dateilader sind. Ich habe unten einen relevanten Abschnitt der Dokumentation kopiert:

• asset/resource gibt eine separate Datei aus und exportiert die URL. Zuvor mit file-loader erreichbar.
• asset/inline exportiert eine Daten-URI des Assets. Zuvor mit url-loader erreichbar.
• asset/source exportiert den Quellcode des Assets. Zuvor mit raw-loader erreichbar.
• asset wählt automatisch zwischen dem Export einer Daten-URI und dem Aussenden einer separaten Datei aus. Vorher mit url-loader mit einer Größenbeschränkung des Assets erreichbar.

Um eines hinzuzufügen, können Sie Ihre Konfiguration so aussehen lassen:

// webpack.config.js

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/,
                type: "asset/resource"
            }
        ]
    }
};

Um zu steuern, wie die Dateien ausgegeben werden, können Sie Vorlagens Pfade verwenden.

In der Konfiguration können Sie die globale Vorlage hier festlegen:

// webpack.config.js
module.exports = {
    ...
    output: {
        ...
        assetModuleFilename: '[path][name].[hash][ext][query]'
    }
}

Um für einen bestimmten Satz von Assets zu überschreiben, können Sie dies tun:

// webpack.config.js

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/,
                type: "asset/resource"
                generator: {
                    filename: '[path][name].[hash][ext][query]'
                }
            }
        ]
    }
};

Die bereitgestellte Vorlage wird zu Dateinamen führen, die wie build/images/img.151cfcfa1bd74779aadb.png aussehen. Der Hash kann nützlich sein für Cache-Busting etc. Passen Sie es Ihren Bedürfnissen an.