wake-up-neo.com

So erstellen Sie mehrere Ausgabepfade in der Webpack-Konfiguration

Kann jemand mehrere Ausgabepfade in einer Datei webpack.config.js erstellen? Ich verwende bootstrap-sass, das mit ein paar verschiedenen Font-Dateien geliefert wird usw. Für die Verarbeitung durch Webpack habe ich den File-Loader enthalten, der ordnungsgemäß funktioniert. Die von ihm ausgegebenen Dateien werden jedoch in dem Ausgabepfad gespeichert, für den ich angegeben wurde Der Rest meiner Dateien: 

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

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

Ich habe ein bisschen gegoogelt und bin auf diese * Ausgabe von Github gestoßen, wo einige Lösungen angeboten werden, edit: 

es sieht jedoch so aus, als müssten Sie den Einstiegspunkt kennen, um eine Ausgabe mit der Hash-Methode .__ zu spezifizieren. Beispiel: 

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 Eingabevorgang bei den Zeichensatzdateien jedoch irgendwie abstrahiert und alles, was ich weiß, ist die Ausgabe. Bei meinen anderen Dateien, die sich umwandeln, gibt es einen bekannten Punkt, an dem ich sie von meinen Ladern bearbeiten muss. Wenn es eine Möglichkeit gab, herauszufinden, wo dieser Schritt stattfand, könnte ich die Hash-Methode verwenden, um die Ausgabepfade anzupassen. Ich weiß jedoch nicht, wo diese Dateien benötigt werden. 

111
spb

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

Ich trenne jedoch den Ausgabepfad mit dem Multi-Compiler . (d. h. durch Trennen des Konfigurationsobjekts von 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 Operatoren extend library oder Object.assign in ES6 oder den Spread-Operator {...} in ES7 verwenden.

154
Yeo

Webpack unterstützt mehrere Ausgabepfade.

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

webpack config:

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
166
zhengkenghong

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

Grundsätzlich befolgen Sie die Doc-Regeln nicht 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 erfordern

/-
  foo.js
  bar.js

Und mach daraus

/-
  foo.js
  bar.js
  components/foo/dist/foo.js
  components/bar/dist/bar.js
13
cmswalker

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

2
sanjsanj

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 Zusammenstellung auswirken. Ausgabeoptionen geben Webpack an, wie die kompilierten Dateien auf die Festplatte geschrieben werden. Beachten Sie, dass es zwar mehrere Einstiegspunkte geben kann, jedoch nur eine Ausgabekonfiguration angegeben wird.

Wenn Sie ein Hash ([Hash] oder [Chunkhash]) verwenden, stellen Sie sicher, dass die Module konsistent angeordnet werden. Verwenden Sie das OccurenceOrderPlugin oder den RecordsPath.

2
ex-zac-tly

Ich bin gerade erst in index.js im File-Loader-Modul gelandet und habe geändert, wo der Inhalt ausgegeben 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 gehandhabt wird. Dies sind nur Schriftarten.

//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;
0
spb