wake-up-neo.com

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

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

290

Sie müssen nichts kopieren, das Webpack funktioniert anders als das Schlucken. Webpack ist ein Modulbündler und alles, was Sie in Ihren Dateien referenzieren, wird enthalten sein. Dazu müssen Sie lediglich einen Loader angeben.

Also wenn du schreibst:

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. Das file - oder rl-loader nimmt zum Beispiel die referenzierte Datei, legt sie in den Ausgabeordner des Webpacks (der in Ihrem Fall build sein sollte) und gibt die zurück Hash-URL für diese Datei.

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 Dateilader installieren, damit dies funktioniert.

173
Johannes Ewald

Das Verwenden von Assets mit dem Dateilademodul ist die Art und Weise, wie das Webpack verwendet werden soll ( Quelle ). Wenn Sie jedoch mehr Flexibilität benötigen oder eine übersichtlichere Oberfläche wünschen, können Sie statische Dateien auch direkt mit my copy-webpack-plugin ( npm , Github ) kopieren. Für Ihr static bis build Beispiel:

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

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

Wenn Sie Ihre statischen Dateien kopieren möchten, können Sie den Dateilader 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 deiner 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 leistungsfähige Methode, um zu erforschen !!

53

Ein Vorteil, den das oben erwähnte copy-webpack-plugin mit sich bringt, ist, dass alle anderen hier erwähnten Methoden die Ressourcen immer noch in Ihren Bundle-Dateien bündeln (und erfordern, dass Sie oder "erfordern" "importieren" sie irgendwo). Wenn ich nur ein paar Bilder oder einige Teilvorlagen verschieben möchte, möchte ich meine Javascript-Bundle-Datei nicht mit nutzlosen Verweisen auf sie überfrachten, sondern nur die Dateien an der richtigen Stelle ausgeben. Ich habe keinen anderen Weg gefunden, dies im Webpack zu tun. Zugegeben, es ist nicht das, wofür das 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)

10
steev

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

In diesem Beispiel wird erwartet, dass node sich auf Ihrem Weg befindet. Installieren Sie cpy-cli als Entwicklungsabhängigkeit:

npm install --save-dev cpy-cli

Dann erstelle ein paar nodejs-Dateien. Eine, um den Kopiervorgang durchzuführen, und die andere, um ein Häkchen und eine Meldung anzuzeigen.

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 in package.json hinzu. Angenommen, Skripte befinden sich in <project-root>/scripts/

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

So führen Sie das Skript aus:

npm run copy

7
RnR

Höchstwahrscheinlich sollten Sie CopyWebpackPlugin verwenden, das in kevlened answer erwähnt wurde. Alternativ können Sie für Dateien wie . Html oder . Json auch den Raw-Loader oder den Json-Loader verwenden. Installieren Sie es über npm install -D raw-loader und fügen Sie dann lediglich einen weiteren Loader zu unserer webpack.config.js -Datei hinzu.

Mögen:

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

Hinweis: Starten Sie den webpack-dev-server neu, damit die Konfigurationsänderungen wirksam werden.

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

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

So lade ich statische images 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/'
          },
        }
    ]
}

Vergiss nicht, file-loader zu installieren, damit das funktioniert.

4
RegarBoy

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

webpack unterstützt jetzt das Zurücksenden eines Promises 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 dann das Webpack auslöst. Z.B.:

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

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

In meinem Fall war 'copy-webpack-plugin' jedoch nicht erforderlich (ich habe es später erfahren).

webpack ignoriert Root-Pfade
Beispiel

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

Um dies zu ermöglichen, ohne das 'copy-webpack-plugin' zu verwenden, verwenden Sie '~' in Pfaden

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

'~' weist webpack an, 'images' als Modul zu betrachten

hinweis: Möglicherweise müssen Sie das übergeordnete Verzeichnis des Bildverzeichnisses in hinzufügen

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

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

2
techNik

nehmen wir an, alle Ihre statischen Assets befinden sich in einem Ordner "static" auf Stammebene und Sie möchten sie in den Erstellungsordner 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, /^\.\/.*\.*/);
1
abhisekpaul

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

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