設定]のWebPACK

Question

私は、すなわちpublic/asests/cssとpublic/assets/js、それぞれのサブディレクトリに出力CSSやJSへのconfigureのWebPACKを管理していました。しかし、私はイメージとフォントで同じことをする方法を知らない。

つまり、public/assets/imagesフォルダに画像を出力し、public/assets/fontsにフォントを出力したいと思います。

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

私はGitHubの上url-loader & file-loaderのドキュメントを参照して、これを把握できます。

は、ここに私のWebPACKの設定ファイルです。

すべて私は、フルパスを指定するためにという名前のクエリ文字列パラメータをローダーに追加する必要がありました。また、出力場所にファイルの名前を付ける方法を指定できることも学びました。

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

これは私が生産に使用するものです。私は、多くの場合、IEのフォールバック* .SVG画像が使用されている状況やSVGフォントに遭遇します。ここでは、フォントは常にnode_modulesの内側にあると仮定します。私はまた、開発者がtest: /fonts\/[w+].(svg|eot ....)をやって見てきました。