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 obigen Vorschläge sind gut. Aber um Ihre Frage direkt zu beantworten, würde ich vorschlagen, cpy-cli in einem Skript zu verwenden, das in Ihrer package.json definiert ist.

In diesem Beispiel wird erwartet, dass node irgendwo in Ihrem Pfad ist. Installieren Sie cpy-cli als Entwicklungsspeicherung:

npm install --save-dev cpy-cli

Erstellen Sie dann ein paar Node.js-Dateien. Eine zum Kopieren und die andere zum Anzeigen eines Häkchens und einer Nachricht.

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(' Kopiere /static/* in das Verzeichnis /build/\n\n');
}

checkmark.js

var chalk = require('chalk');

/**
 * Fügt ein Häkchen-Symbol hinzu
 */
function addCheckMark(callback) {
  process.stdout.write(chalk.green(' '));
  callback();
}

module.exports = addCheckMark;

Fügen Sie das Skript in Ihrer package.json hinzu. Unter der Annahme, dass die Skripte in /scripts/ sind

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

Um das Skript auszuführen:

npm run copy

Answer 2

Der Weg, wie ich statische Bilder und Schriftarten lade:

Modul: {
    Regeln: [
      ....

      {
        Test: /\.(jpe?g|png|gif|svg)$/i,
        /* Schriftarten ausschließen, während mit Bildern gearbeitet wird, z.B. .svg kann sowohl ein Bild als auch eine Schriftart sein. */
        Ausschließen: Pfad.resolve(__dirname, '../src/assets/fonts'),
        Verwenden: [{
          Loader: 'file-loader',
          Optionen: {
            Name: '[name].[ext]',
            Ausgabepfad: 'images/'
          }
        }]
      },
      {
        Test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
        /* Bilder ausschließen, während mit Schriftarten gearbeitet wird, z.B. .svg kann sowohl ein Bild als auch eine Schriftart sein. */
        Ausschließen: Pfad.resolve(__dirname, '../src/assets/images'),
        Verwenden: [{
          Loader: 'file-loader',
          Optionen: {
            Name: '[name].[ext]',
            Ausgabepfad: 'fonts/'
          }
        }]
    ]
}

Vergessen Sie nicht, file-loader zu installieren, um dies zu ermöglichen.

Answer 3

Sie können Bash in Ihrer package.json schreiben:

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

Answer 4

Am wahrscheinlichsten sollten Sie CopyWebpackPlugin verwenden, das in kevlened Antwort erwähnt wurde. Alternativ für einige Arten von Dateien wie .html oder .json können Sie auch raw-loader oder json-loader verwenden. Installieren Sie es mit npm install -D raw-loader und dann müssen Sie nur einen weiteren Loader zu unserer webpack.config.js-Datei hinzufügen.

Wie:

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

Hinweis: Starten Sie den webpack-dev-server neu, damit Änderungen an der Konfiguration wirksam werden.

Und jetzt können Sie HTML-Dateien unter Verwendung relativer Pfade anfordern, was es viel einfacher macht, Ordner zu verschieben.

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

Answer 5

Ich steckte hier auch fest. Das copy-webpack-plugin hat bei mir funktioniert.

Allerdings war 'copy-webpack-plugin' in meinem Fall nicht notwendig (das habe ich später herausgefunden).

Webpack ignoriert Stammverzeichnispfade
Beispiel

'~' sagt webpack, dass 'images' als Modul betrachtet werden soll

Bitte beachten Sie: Möglicherweise müssen Sie das übergeordnete Verzeichnis des images-Verzeichnisses hinzufügen

resolve: {
    modules: [
        'übergeordnetes Verzeichnis des images',
        'node_modules'
    ]
}

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