文件加載器，網址，裝載機的WebPack不加載圖像

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模塊。這是我的WebPack的配置是什麼樣子：

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" } 
], 
},