Wie kopiere ich statische Dateien, um ein Verzeichnis mit Webpack zu erstellen?

Ich versuche , von sich zu bewegen Gulpzu Webpack. In GulpIch habe eine Aufgabe, die alle Dateien und Ordner von / static / Ordner nach / build / Ordner kopiert . Wie mache ich das gleiche mit Webpack? Benötige ich ein Plugin?

Sie müssen keine Dinge kopieren, das Webpack funktioniert anders als das Schlucken. Webpack ist ein Modulbündler und alles, was Sie in Ihren Dateien referenzieren, wird eingeschlossen. Sie müssen nur einen Loader dafür angeben.

Also, wenn Sie schreiben:

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

Webpack versucht zunächst, die referenzierte Datei als JavaScript zu analysieren (da dies die Standardeinstellung ist). Das wird natürlich scheitern. Aus diesem Grund müssen Sie einen Loader für diesen Dateityp angeben. Die Datei - oder beispielsweise der URL-Loader - nimmt die referenzierte Datei, legt sie im Ausgabeordner des Webpacks ab (was buildin Ihrem Fall der Fall sein sollte) und gibt die Hash-URL für diese Datei zurück.

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

Normalerweise werden Lader ü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.

Das Erfordernis von Assets mithilfe des File-Loader-Moduls ist die Art und Weise, wie Webpack verwendet werden soll ( Quelle ). Wenn Sie jedoch mehr Flexibilität benötigen oder eine übersichtlichere Benutzeroberfläche wünschen, können Sie statische Dateien auch direkt mit my copy-webpack-plugin( npm , Github ) kopieren . Für die staticzum buildBeispiel:

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

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

Wenn Sie Ihre statischen Dateien kopieren möchten, können Sie den File-Loader folgendermaßen 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/ ist relativ zu dem Ort, an dem sich Ihre js-Datei befindet.

Sie können das gleiche mit Bildern oder was auch immer tun. Der Kontext ist eine mächtige Methode zum Erkunden !!

Ein Vorteil, den das oben erwähnte Copy-Webpack-Plugin bringt, der zuvor noch nicht erklärt wurde, besteht darin, dass alle anderen hier genannten Methoden die Ressourcen weiterhin in Ihren Bundle-Dateien bündeln (und erfordern, dass Sie sie irgendwo "benötigen" oder "importieren"). Wenn ich nur einige Bilder oder Teilvorlagen verschieben möchte, möchte ich meine Javascript-Bundle-Datei nicht mit nutzlosen Verweisen auf sie überladen, sondern nur, dass die Dateien an der richtigen Stelle ausgegeben werden. Ich habe im Webpack keinen anderen Weg gefunden, dies zu tun. Zugegeben, es ist nicht das, wofür Webpack ursprünglich entwickelt wurde, aber es ist definitiv ein aktueller Anwendungsfall. (@BreakDS Ich hoffe, dies beantwortet Ihre Frage - es ist nur ein Vorteil, wenn Sie es wollen)

Die obigen Vorschläge sind gut. Aber um zu versuchen, Ihre Frage direkt zu beantworten, würde ich vorschlagen, cpy-cliin einem Skript zu verwenden, das in Ihrem definiert ist package.json.

Dieses Beispiel erwartet nodeirgendwo auf Ihrem Weg. cpy-cliAls Entwicklungsabhängigkeit installieren :

npm install --save-dev cpy-cli

Erstellen Sie dann einige NodeJS-Dateien. Einer zum Kopieren und der andere zum Anzeigen eines Häkchens und einer Meldung.

copy.js

#!/usr/bin/env node

var shelljs = require('shelljs');
var addCheckMark = require('./helpers/checkmark');
var path = require('path');

var cpy = path.join(__dirname, '../node_modules/cpy-cli/cli.js');

shelljs.exec(cpy + ' /static/* /build/', addCheckMark.bind(null, callback));

function callback() {
  process.stdout.write(' Copied /static/* to the /build/ directory\n\n');
}

checkmark.js

var chalk = require('chalk');

/**
 * Adds mark check symbol
 */
function addCheckMark(callback) {
  process.stdout.write(chalk.green(' ✓'));
  callback();
}

module.exports = addCheckMark;

Fügen Sie das Skript hinzu package.json. Vorausgesetzt, Skripte sind in<project-root>/scripts/

...
"scripts": {
  "copy": "node scripts/copy.js",
...

So führen Sie den sript aus:

npm run copy

Höchstwahrscheinlich sollten Sie CopyWebpackPlugin verwenden, das in kevlened answer erwähnt wurde. Alternativ können Sie für einige Arten von Dateien wie .html oder .json auch Raw-Loader oder Json-Loader verwenden. Installieren Sie es über npm install -D raw-loaderund dann müssen Sie nur noch einen weiteren Loader zu unserer webpack.config.jsDatei hinzufügen .

Mögen:

{
    test: /\.html/,
    loader: 'raw'
}

Hinweis: Starten Sie den Webpack-Dev-Server neu, damit alle Konfigurationsänderungen wirksam werden.

Und jetzt können Sie HTML-Dateien mit relativen Pfaden anfordern. Dies erleichtert das Verschieben von Ordnern erheblich.

template: require('./nav.html')  

Die Art imagesund Weise, wie ich statisch lade und fonts:

module: {
    rules: [
      ....

      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        /* Exclude fonts while working with images, e.g. .svg can be both image or font. */
        exclude: path.resolve(__dirname, '../src/assets/fonts'),
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'images/'
          }
        }]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
        /* Exclude images while working with fonts, e.g. .svg can be both image or font. */
        exclude: path.resolve(__dirname, '../src/assets/images'),
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
          },
        }
    ]
}

Vergessen Sie nicht zu installieren file-loader, damit das funktioniert.

Sie können bash in Ihr package.json schreiben:

# package.json
{
  "name": ...,
  "version": ...,
  "scripts": {
    "build": "NODE_ENV=production npm run webpack && cp -v <this> <that> && echo ok",
    ...
  }
}

Ich war auch hier fest. Copy-Webpack-Plugin hat bei mir funktioniert.

Allerdings war 'Copy-Webpack-Plugin' in meinem Fall nicht notwendig (ich habe es später erfahren).

Das Webpack ignoriert das
Beispiel für Root-Pfade

<img src="/images/logo.png'>

Damit dies funktioniert, ohne das 'Copy-Webpack-Plugin' zu verwenden, verwenden Sie '~' in Pfaden

<img src="~images/logo.png'>

'~' weist das Webpack an, 'images' als Modul zu betrachten

Hinweis: Möglicherweise müssen Sie das übergeordnete Verzeichnis des Bilderverzeichnisses hinzufügen

resolve: {
    modules: [
        'parent-directory of images',
        'node_modules'
    ]
}

Besuchen Sie https://vuejs-templates.github.io/webpack/static.html

Mit der Webpack-Konfigurationsdatei (in Webpack 2) können Sie eine Versprechenskette exportieren, solange der letzte Schritt ein Webpack-Konfigurationsobjekt zurückgibt. Siehe Konfigurationsdokumente für Versprechen . Von dort:

Das Webpack unterstützt jetzt die Rückgabe eines Versprechens aus der Konfigurationsdatei. Dies ermöglicht die asynchrone Verarbeitung in Ihrer Konfigurationsdatei.

Sie können eine einfache rekursive Kopierfunktion erstellen, die Ihre Datei kopiert und erst danach das Webpack auslöst. Z.B:

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

Nehmen wir an, alle Ihre statischen Assets befinden sich in einem Ordner "statisch" auf der Stammebene und Sie möchten sie in den Build-Ordner kopieren, wobei die Struktur des Unterordners beibehalten wird, und dann einfach in Ihre Eingabedatei einfügen

//index.js or index.jsx

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