파일 로더, URL-로더와 웹팩 내가 그래서 (내가 바벨을 사용하고 있습니다)처럼 내 반작용 코드에서 이미지를 가져하려고 이미지

Question

를로드하지 : 나는 검사 할 때 내가 볼 무엇

import borgCube from '../assets/cube.png'; 

<img className="img-rounded" src={borgCube}></img><p /> 

브라우저에서 깨진 이미지 :

<img class="img-rounded" src="data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICI5NTU1ZGJiNWQ3YjUzMjA3N2NjNWQyMzc4ZDgzNzVmZS5wbmciOw=="> 

이전까지는 CSS 모듈을 추가 할 때까지 작동하지 않았습니다. 이것은 그것을 고정

var webpack = require('webpack'); 
var path = require('path'); 
var combineLoaders = require('webpack-combine-loaders'); 

const isDebug = !process.argv.includes('--release'); 

module.exports = { 
    devtool: 'eval', 

    entry: { 
    app: [ 
     'webpack-dev-server/client?http://0.0.0.0:3000', 
     'webpack/hot/only-dev-server', 
     './src/index' 
    ] 
    }, 

    output: { 
    filename: '[name].js', 
    path: path.join(__dirname, './build'), 
    publicPath: 'http://localhost:3000/build/' 
    }, 

    resolve: { 
    extensions: ['', '.js', '.jsx', '.css', '.png'], 
    modulesDirectories: ['src', 'node_modules'] 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.(js|jsx)$/, 
     loaders: ['react-hot', 'babel'], 
     exclude: /node_modules/ 
     }, 
    { test: /\.(woff|png)$/, loader: 'url-loader?limit=10000' }, 
    { test: /\.(png|jpg)$/, loader: 'file-loader'}, 

    { 
     test: /\.css$/, 
     loader: combineLoaders([ 
      { 
      loader: 'style-loader' 
      }, { 
      loader: 'css-loader', 
      query: { 
       modules: true, 
       localIdentName: '[name]__[local]___[hash:base64:5]' 
      } 
      } 
      ]) 
     }, 
    ] 

    }, 


    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') } 
    }) 
    ] 

}; 

Answer 1

:이처럼 내 웹팩 설정이 모습입니다

module: { 
loaders: [ 
    { 
    test: /\.(js|jsx)$/, 
    loaders: ['react-hot', 'babel'], 
    exclude: /node_modules/ 
    }, 
    { 
     test: /\.css$/, 
     loader: combineLoaders([ 
     { 
      loader: 'style-loader' 
     }, { 
      loader: 'css-loader', 
      query: { 
      modules: true, 
      localIdentName: '[name]__[local]___[hash:base64:5]' 
      } 
     } 
     ]) 
    }, 
    { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: "url-loader?limit=100000" }, 
    { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" }, 
    { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" } 
], 
},