So erstellen Sie mehrere Ausgabepfade in der Webpack-Konfiguration

165

Weiß jemand, wie man mehrere Ausgabepfade in einer webpack.config.js-Datei erstellt? Ich verwende Bootstrap-Sass, das mit einigen verschiedenen Schriftdateien usw. geliefert wird. Damit Webpack diese verarbeiten kann, habe ich einen Dateilader hinzugefügt, der ordnungsgemäß funktioniert. Die ausgegebenen Dateien werden jedoch unter dem von mir angegebenen Ausgabepfad gespeichert der Rest meiner Dateien:

    output: {
      path: __dirname + "/js",
      filename: "scripts.min.js"
    }

Ich möchte etwas erreichen, bei dem ich mir vielleicht die Erweiterungstypen für das ausgegebene Webpack ansehen kann und für Dinge, die mit .woff .eot usw. enden, sie auf einen anderen Ausgabepfad umleiten lassen. Ist das möglich?

Ich habe ein wenig googeln und kam in dieser * Ausgabe auf Github , wo ein paar Lösungen angeboten werden, bearbeiten:

Es sieht jedoch so aus, als müssten Sie den Einstiegspunkt kennen, um eine Ausgabe mit der Hash-Methode angeben zu können, z.

var entryPointsPathPrefix = './src/javascripts/pages';
var WebpackConfig = {
  entry : {
    a: entryPointsPathPrefix + '/a.jsx',
    b: entryPointsPathPrefix + '/b.jsx',
    c: entryPointsPathPrefix + '/c.jsx',
    d: entryPointsPathPrefix + '/d.jsx'
  },

  // send to distribution
  output: {
    path: './dist/js',
    filename: '[name].js'
  }
}

* https://github.com/webpack/webpack/issues/1189

In meinem Fall ist der Eingabeprozess jedoch in Bezug auf die Schriftdateien irgendwie abstrahiert und alles, was ich weiß, ist die Ausgabe. Im Fall meiner anderen Dateien, die Transformationen durchlaufen, gibt es einen bekannten Punkt, an dem ich fordere, dass sie dann von meinen Loadern verarbeitet werden. Wenn es eine Möglichkeit gäbe herauszufinden, wo dieser Schritt stattfand, könnte ich die Hash-Methode verwenden, um die Ausgabepfade anzupassen, aber ich weiß nicht, wo diese Dateien benötigt werden.

spb
quelle

Antworten:

220

Ich bin mir nicht sicher, ob wir das gleiche Problem haben, da Webpack ab Juni 2016 nur eine Ausgabe pro Konfiguration unterstützt. Ich denke, Sie haben das Problem bereits auf Github gesehen .

Aber ich trenne den Ausgabepfad mithilfe des Multi-Compilers . (dh das Konfigurationsobjekt von trennen webpack.config.js).

var config = {
    // TODO: Add common Configuration
    module: {},
};

var fooConfig = Object.assign({}, config, {
    name: "a",
    entry: "./a/app",
    output: {
       path: "./a",
       filename: "bundle.js"
    },
});
var barConfig = Object.assign({}, config,{
    name: "b",
    entry: "./b/app",
    output: {
       path: "./b",
       filename: "bundle.js"
    },
});

// Return Array of Configurations
module.exports = [
    fooConfig, barConfig,       
];

Wenn Sie eine gemeinsame Konfiguration haben, können Sie die Erweiterungsbibliothek oder Object.assignin ES6 oder den {...}Spread-Operator in ES7 verwenden.

Yeo
quelle
Ich habe das Snippet nicht ausgeführt, es kann ein Fehler oder Tippfehler auftreten
Yeo
Ich habe dein Snippet ausgeführt, funktioniert wie Charme ... Überrascht, dass niemand dies entdeckt hat, wie Frontend-Entwickler, keine Geduld, immer in Eile ;-). Ich exportiere Konfigurationen auf die gleiche Weise, aber meine Deklaration ist anders / standard: var config = {entry: SOURCE_DIR + '/index.jsx', ....} Ich habe auch keinen Multi-Compiler verwendet: - \
Aubergine
Oder können Sie einfach ein Webpack && cp etc in npm machen?
SuperUberDuper
1
Das ist sehr nützlich für mich, um ein npm-Paket sowohl im ursprünglichen Ordner (automatische Tests sind vorhanden) als auch im Ordner der App, die das Paket implementiert, bereitzustellen. Auf diese Weise kann ich den npm-Download-Schritt überspringen und meinen aktualisierten Paketcode live testen, bis die neue Version stabil ist und auf npm veröffentlicht werden kann.
Adrian Moisa
<pre> <code> var config = {// TODO: Gemeinsames Konfigurationsmodul hinzufügen: {},}; </ code> </ pre> Das module{}Objekt ist falsch. Es ist nicht erforderlich. Er wird auf der gleichen Ebene wie die Schlüsselwörter erweitert / zusammengefügt werden name, entry, output(von Ihrem Beispiel). <pre> <code> {module: {mode: "development", devtool: "source-map"}}, name: "a", Eintrag: "./a/app", Ausgabe: {path: "/ a ", Dateiname:" bundle.js "}} </ code> </ pre>
Rob Waa
249

Webpack unterstützt mehrere Ausgabepfade.

Legen Sie die Ausgabepfade als Eingabeschlüssel fest. Und verwenden Sie die nameals Ausgabevorlage.

Webpack-Konfiguration:

entry: {
    'module/a/index': 'module/a/index.js',
    'module/b/index': 'module/b/index.js',
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
}

generiert:

└── module
    ├── a
    │   └── index.js
    └── b
        └── index.js
Zhengkenghong
quelle
4
In meinem Fall möchte ich, dass eine Ausgabe kein Chunkhash enthält. Gibt es eine einfache Lösung dafür? Vielen Dank.
RaRaRa
1
@zhengkenghong Ich glaube, dass der generierte Ausgabepfad darin benötigt würde dist. Anstatt module/a/index.jsein Ausgabepfad zu sein, sollte dies der Fall sein. module/a/dist/index.jsAndernfalls überschreiben Sie Ihre Eingabedateien.
Dance2die
1
Der distOrdner @Sung ist bereits im Ausgabepfad konfiguriert. Die generierte Datei wäre also tatsächlich dist/module/a/index.js, was ich nicht erwähnt habe.
Zhengkenghong
4
Ich denke, dies sollte die akzeptierte Antwort sein, da es die Antwort aus den Webpack 4-Dokumenten ist. -> webpack.js.org/concepts/output/#multiple-entry-points
Will
1
@raRaRa Spät zur Party, aber Sie können dies tun, indem Sie eine Funktion verwenden, output.filenamewie hier dokumentiert: webpack.js.org/configuration/output/#outputfilename
Thomas
22

Wenn Sie mit mehreren Ausgabepfaden mit derselben Tiefe und Ordnerstruktur leben können, gibt es eine Möglichkeit, dies in Webpack 2 zu tun (müssen noch mit Webpack 1.x getestet werden).

Grundsätzlich befolgen Sie nicht die Dokumentregeln und geben einen Pfad für den Dateinamen an.

module.exports = {
    entry: {
      foo: 'foo.js',
      bar: 'bar.js'
    },

    output: {
      path: path.join(__dirname, 'components'),
      filename: '[name]/dist/[name].bundle.js', // Hacky way to force webpack   to have multiple output folders vs multiple files per one path
    }
};

Das wird diese Ordnerstruktur nehmen

/-
  foo.js
  bar.js

Und verwandeln Sie es in

/-
  foo.js
  bar.js
  components/foo/dist/foo.js
  components/bar/dist/bar.js
cmswalker
quelle
@ccnixon es ist hier dokumentiert webpack.js.org/configuration/output/#outputfilename suchen nach "noch erlaubt".
John Henckel
3

Ich habe ein Plugin geschrieben, das hoffentlich das tun kann, was Sie wollen. Sie können bekannte oder unbekannte Einstiegspunkte (mit glob ) angeben und genaue Ausgaben angeben oder sie dynamisch mithilfe des Pfads und des Namens der Eingabedatei generieren. https://www.npmjs.com/package/webpack-entry-plus

sanjsanj
quelle
3

Sie können definitiv eine Reihe von Konfigurationen aus Ihrer Datei webpack.config zurückgeben. Es ist jedoch keine optimale Lösung, wenn nur eine Kopie der Artefakte im Ordner der Projektdokumentation gespeichert werden soll, da Webpack Ihren Code zweimal erstellt und die Gesamtzeit für die Erstellung verdoppelt.

In diesem Fall würde ich empfehlen, stattdessen das FileManagerWebpackPlugin-Plugin zu verwenden:

const FileManagerPlugin = require('filemanager-webpack-plugin');
// ...
plugins: [
    // ...
    new FileManagerPlugin({
      onEnd: {
        copy: [{
          source: './dist/*.*',
          destination: './public/',
        }],
      },
    }),
],
Alexander
quelle
1

Sie können nur einen Ausgabepfad haben.

aus den Dokumenten https://github.com/webpack/docs/wiki/configuration#output

Optionen, die sich auf die Ausgabe der Kompilierung auswirken. Die Ausgabeoptionen teilen Webpack mit, wie die kompilierten Dateien auf die Festplatte geschrieben werden sollen. Beachten Sie, dass es zwar mehrere Einstiegspunkte geben kann, jedoch nur eine Ausgabekonfiguration angegeben ist.

Wenn Sie Hashing verwenden ([Hash] oder [Chunkhash]), stellen Sie sicher, dass die Module konsistent angeordnet sind. Verwenden Sie das OccurenceOrderPlugin oder recordsPath.

ex-zac-tly
quelle
Vielen Dank. Ich werde das Q verlassen, nur für den Fall, dass jemand eine Problemumgehung finden kann.
spb
Was ist Ihr Anwendungsfall, wenn Sie zwei Ausgabepfade benötigen? Es hört sich so an, als ob Sie 2 Anwendungen oder 1 Anwendung und 1 Modul möchten.
Ex-zac-tly
Ich dachte, ich brauche eine, die der Ausgabe gewidmet ist, die vom File-Loader generiert wird, der sich alle im Stammverzeichnis des Projekts befindet, während ich sie in einem eigenen Ordner haben wollte. Ich habe gerade den Ausgabepfad im Loader selbst gemäß meiner Antwort unten umgeleitet.
spb
1
Das ist nicht ganz richtig. Sie können technisch nur einen Ausgabepfad angeben, dieser gilt jedoch für jeden Schlüssel in einem Eingabeobjekt
sanjsanj
0

Ich bin gerade dazu gekommen, in index.js im File-Loader-Modul zu gehen und zu ändern, wohin der Inhalt gesendet wurde. Dies ist wahrscheinlich nicht die optimale Lösung, aber bis es einen anderen Weg gibt, ist dies in Ordnung, da ich genau weiß, was von diesem Loader verarbeitet wird, bei dem es sich nur um Schriftarten handelt.

//index.js
var loaderUtils = require("loader-utils");
module.exports = function(content) {
    this.cacheable && this.cacheable();
    if(!this.emitFile) throw new Error("emitFile is required from module system");
    var query = loaderUtils.parseQuery(this.query);
    var url = loaderUtils.interpolateName(this, query.name || "[hash].[ext]", {
        context: query.context || this.options.context,
        content: content,
        regExp: query.regExp
    });
    this.emitFile("fonts/"+ url, content);//changed path to emit contents to "fonts" folder rather than project root
    return "module.exports = __webpack_public_path__ + " + JSON.stringify( url) + ";";
}
module.exports.raw = true;
spb
quelle
1
Ich weiß nicht, ob dies immer noch ein Problem für Sie ist, aber schauen Sie unter npmjs.com/package/webpack-entry-plus
sanjsanj