Bild im gewünschten Ordner optimieren

Question

Ich verwende Webpack zum Bündeln. Ich benutze reactjs und django. Ich möchte, dass die von Django verwendeten statischen Dateien getrennt sind. Ich könnte das Bild verkleinern, aber die minimierten Bilder werden in dem Ordner gespeichert, in dem die Ausgabedatei gebündelt ist. Ich möchte, dass alle verkleinerten Bilder im Frontend -> Assets-Ordner gespeichert werden. Wie kann ich es so machen?

Die Projektstruktur sieht wie folgt aus

App - es ist ein Verzeichnis, in dem statischen Dateien werden für Django gehalten. Webpack bündelt die react-Dateien zu app.js und wird hier platziert, da die Django-Vorlage sie in ihrer Vorlage als <script src='app/bundle/js/app.js'></script> rendern muss.

Frontend - Es ist ein Verzeichnis, in dem sich alle reaktiven Dateien befinden. Ich möchte, dass sich die Bilder in diesem Verzeichnis befinden (assets/images /). Bilder, die in reactjs verwendet werden.

Wie kann ich es so machen?

jetzt mein webpack diese Weise konfiguriert ist

const path = require("path"); 
if(!process.env.NODE_ENV) { 
    process.env.NODE_ENV = 'development'; 
} 

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: path.join("../app/static/build/", "js"), 
    filename: "app.js", 
    publicPath: "../app/static/build/" 
    }, 
    devtoo: 'source-map', 
    debug: true, 
    module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
     presets: ['react', 'es2015', 'stage-1'] 
     } 
    }, 
    {test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=images/[name].[ext]"}, 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
}; 

Answer 1

Sie benutzerdefinierte Ausgabe und öffentliche Wege durch die Verwendung der outputPath und publicPath Abfragenamen Parameter angeben:

loader: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images/" 

Aber diese Funktion ist nicht published to NPM noch nicht. So unfortunatly müssen Sie warten, während es und diese Lader von Github verwenden veröffentlicht oder Klon werden repo