2016-10-11 14 views
0

私は髪を引き離しています...インライン画像loading..webpack

私はすべてを試したような気がします。

これは私のWebPACKの設定です。しかし、私はなりたい...

var publicConfig = { 
    context: path.join(__dirname, 'src'), 
    entry: [ 
    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', 
    './public.jsx', 
    ], 
    output: { 
    path: path.join(__dirname, 'app'), 
    filename: 'publicBundle.js', 
    publicPath: '/assets/', 
    }, 
    module: { 
    loaders: [ 
     { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, 
     //{ test: /\.css$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' }, 
     // { test: /\.css$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]' }, 
     { test: /\.css$/, loader: "style!css" }, 
     { 
      test: /\.(jpg|png)$/, 
      loader: 'url?limit=25000' 
     }, 
     { test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader : 'file-loader' } 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx', '.json'] 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ] 
}; 

私のCSSで画像を定義私が欲しいものを正確に/資産/フォルダに追加されるイメージのファイルインライン(htmlビューも同様)からイメージパスを呼び出すことができます。しかし、私のCSSファイルからそれらをターゲットにしない限り、画像は/ assets /にコピーされません。

私がすることによって、それらをインポートしようとした:

import logo from './images/animus_logo_blacktext.png' 

しかし、それはまだ私の資産に表示されますdoesntの。

イメージパスのインラインのベストプラクティスは何ですか?

+0

CSSファイルからどのようにターゲットを設定しますか? – Restuta

答えて

-1

URLローダーの代わりにファイルローダーに切り替えます。イメージはあなたの限界25000(25kb)の下にあるかもしれません。

あなたWebPACKの構成を変更せずに、あなたはこれを試みることができる:

import logo from 'file-loader!./images/animus_logo_blacktext.png' 

あなたの資産に画像が表示されるはずです。

0

イメージは非常に小さいのでしょうか? URLローダーで設定した制限は、25000バイト未満のすべてのイメージが、ファイルとして提供される代わりに(データURIとして)インライン化されることを意味します。 25000バイトを超えるファイルは、ファイルローダーがそれらを扱うのと同じ方法でurl-loaderによって処理されます。

関連する問題