So erstellen Sie mehrere Ausgabepfade in der Webpack-Konfiguration

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.

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.

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

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

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

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/',
        }],
      },
    }),
],

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.

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;