Webpack'i ayrı bir alt klasördeki görüntü/yazı tipine dönüştürmek üzere yapılandırın

Question

Web paketini CSS ve JS'yi ilgili alt dizinlere, yani public/asests/css ve public/assets/js dizinlerine yapılandırmayı yönetdim. Ancak, resimler ve yazı tipleri için aynısını nasıl yapacağımı bilmiyorum.

Başka bir deyişle, görüntüleri public/assets/images klasöründe ve yazı tiplerini public/assets/fonts klasörüne vermek istiyorum.

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

ben GitHub üzerinde url-loader & file-loader belgelerine atıfta bulunarak bu anlamaya olabilir:

İşte benim webpack yapılandırma dosyası var.

Tüm yapmam gereken, tam yol belirtmek için loader'da bir ad sorgu-string parametresi eklemekti. Ayrıca dosyaların çıktı konumunda nasıl adlandırılacağını belirtebileceğinizi öğrendim.

{ 
    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' 
    ] 
} 

Bu benim üretimde kullanmak budur. Sıklıkla * .svg resimlerinin kullanıldığı ve IE'nin geri dönüşü için SVG yazı tiplerinin bulunduğu bir duruma rastlarım. Burada yazı tipi her zaman node_modules içinde olduğunu varsayalım. Ayrıca test: /fonts\/[w+].(svg|eot ....) yapıyor devler gördüm.