Webpack konfigurieren, um Bilder/Fonts in einem separaten Unterordner auszugeben

Question

Ich verwaltete configure webpack, um CSS und JS in entsprechende Unterverzeichnisse auszugeben, d. H. public/asests/css und public/assets/js. Ich weiß jedoch nicht, wie ich das für Bilder und Schriften machen soll.

Mit anderen Worten, ich möchte Bilder in public/assets/images Ordner und Schriften in public/assets/fonts Ordner ausgeben.

Hier ist meine webpack Konfigurationsdatei:

var path = require('path'); 
var ExtractCSS = require('extract-text-webpack-plugin'); 

module.exports = { 
    context: path.resolve('private/js'), 
    resolve: ['', '.js', '.jsx', '.es6', '.json'], 
    entry: { 
     homepage: './homepage' 
    }, 
    output: { 
     path: path.resolve('public/assets'), 
     publicPath: '/public/assets/', 
     filename: 'js/[name].js' 
    }, 
    plugins: [ 
     new ExtractCSS('css/[name].css') 
    ], 
    devServer: { 
     contentBase: 'public' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.(es6|js|jsx)$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader' 
      }, 
      { 
       test: /\.css$/, 
       exclude: /node_modules/, 
       loader: ExtractCSS.extract('style-loader', 'css-loader') 
      }, 
      { 
       test: /\.less$/, 
       exclude: /node_modules/, 
       loader: ExtractCSS.extract('style-loader', 'css-loader!less-loader') 
      }, 
      { 
       test: /\.(jpg|jpeg|gif|png|woff|woff2|eot|ttf|svg)$/, 
       exclude: /node_modules/, 
       loader: 'url-loader?limit=1024' 
      } 
     ] 
    } 
} 

Answer 1

Ich kann dies unter Bezugnahme auf url-loader & file-loader Dokumentation auf GitHub herauszufinden.

Alles, was ich tun musste, war ein Name Query-String-Parameter in Loader hinzufügen, um den vollständigen Pfad anzugeben. Ich habe auch gelernt, dass Sie angeben können, wie Dateien am Ausgabeort benannt werden sollen.

{ 
    test: /\.(jpg|jpeg|gif|png)$/, 
    exclude: /node_modules/, 
    loader:'url-loader?limit=1024&name=images/[name].[ext]' 
}, 
{ 
    test: /\.(woff|woff2|eot|ttf|svg)$/, 
    exclude: /node_modules/, 
    loader: 'url-loader?limit=1024&name=fonts/[name].[ext]' 
} 

Answer 2

{ 
    test: /\.(ttf|eot|svg|woff2?)(\?v=[a-z0-9=\.]+)?$/i, 
    include: folders.npm, 
    loader: 'file?name=fonts/[name].[ext]' 
}, 
{ 
    test: /\.(jpe?g|png|gif|svg|ico)$/i, 
    include: folders.src, 
    loaders: [ 
     'file?name=images/[sha512:hash:base64:7].[ext]', 
     'image-webpack?progressive=true&optimizationLevel=7&interlaced=true' 
    ] 
} 

Dies ist, was ich in der Produktion verwenden. Ich stoße oft auf Situationen, in denen * .svg Bilder verwendet werden und SVG Fonts für IE Fallback. Hier nehme ich an, dass font immer innerhalb von node_modules liegt. Ich habe auch Entwickler gesehen, die test: /fonts\/[w+].(svg|eot ....) tun.