0

私はそう(私はバベルを使用しています)のようなコードを反応させるのに画像をインポートしようとしています:ファイル・ローダー、URLローダとのWebPACKロードしていない画像

私が調べたときに私が見る何
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-modulesで追加するまで動作していました。これは私の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') } 
    }) 
    ] 

}; 
+0

はそれを 'ローダーを使用するために試してみることができます'、query:{/ *あなたのクエリオブジェクト* /}] 'の代わりに' combineLoaders'の呼び出し?ローダーではなくローダーに注意してください。 – dotcs

答えて

0

は、これはそれを修正:[ 'スタイルローダー' {ローダー:「CSS-ローダー

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

これは私の時間を節約しました、ありがとうございます!ところで、それはここに誤って表示されます: "minetype = application/font-woff"。それは "mimetype ="と思われるでしょうか? – ASten

関連する問題