인라인 이미지 loading..webpack

Question

나는 내 머리카락을 꺼냈다. ...

나는 모든 것을 시도한 것 같은 느낌.

이 내 웹팩 설정이다 : 그러나, 나는되고 싶어 ...

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' 

하지만 여전히 내 자산에 표시 나던.

이미지 경로 인라인에 가장 적합한 방법은 무엇입니까?

Answer 1

https://www.npmjs.com/package/copy-webpack-plugin을 시도하고 싶다고 생각합니다. 이것은 개별 파일이나 전체 디렉토리를 빌드 디렉토리에 복사하는 webpack 플러그인입니다.

Answer 2

URL 로더 대신 파일 로더로 전환하십시오. 이미지는 최대 25,000 (25kb) 이하일 수 있습니다.

당신의 웹팩 구성을 수정하지 않고 당신이 시도 할 수 :

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

당신은 당신의 자산에서 이미지를 볼 수 있습니다.

Answer 3

이미지가 매우 작습니까? URL 로더에서 구성한 제한은 25000 바이트 미만의 모든 이미지가 파일로 제공되는 대신 데이터 URI로 인라인됨을 의미합니다. 25000 바이트보다 큰 파일은 파일 로더가 처리하는 것과 같은 방식으로 URL 로더에 의해 처리됩니다.