インライン画像loading..webpack

Question

私は髪を引き離しています...

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

これは私の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の。

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

Answer 1

私はあなたがhttps://www.npmjs.com/package/copy-webpack-pluginを試してみたいと思うと思います。これは個々のファイルやディレクトリ全体をビルドディレクトリにコピーするwebpackプラグインです。

Answer 2

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

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

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

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

Answer 3

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