webpackを使用してウェブサイトの画像を読み込むために相対パスを使用するにはどうすればよいですか？

Question

私は、プロジェクトディレクトリ内の画像を.scssファイルとプロジェクト内のさまざまな.jsファイルに関連してプルすることができるように、ポートフォリオWebサイトを展開して設定するのが難しいです。私はwebpackがうまくないです、私はそれを働かせるために定型設定に従ったが、本当にそれを学んでいない。イメージを機能させるためには、自分のコンピュータ上の場所から完全に引き出しなければなりません。これを正しく展開しようとすると、これは機能しませんか？

私のscssファイル（url（ ''））に背景イメージを実装し、Portfolio-Pieceという反応コンポーネント内の多くのイメージを実装する必要があります。

resolve-url-loaderとsass-loaderがインストールされています。ここに私のWebPACKの設定は...誰かがWebPACKのを使用している場合、ルートは何ですかELI5ことができるかどう

var webpack = require('webpack'); 
var path = require('path'); 


var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 

var config = { 
    entry: APP_DIR + '/index.js', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    module : { 
    loaders : [ 
     { test: /\.scss$/, loaders: ["style", "css", "sass", 'resolve-url','sass?sourceMap']}, 
     { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel' }, 
     { test: /\.css$/, loader: 'style-loader!css-loader!resolve-url' }, 
     { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, 
     { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" }, 
     { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" }, 
     { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }, 
     { test: /\.(jpg|png)$/, loader: "file-loader?name=[path][name].[ext]" } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }) 
    ] 
}; 

module.exports = config; 

ボーナスポイント？どこからの相対パスですか？ index.js？ index.html？

Answer 1

まず、resolve-url-loaderは、あなたの設定でsass-loaderの前でなければなりません。あなたは2倍のローダーを持っています：sassとsass?sourceMap。私は私の反応コンポーネントにインラインスタイルとして、背景画像のスタイルを追加し、requireステートメントを使用して同じように、私のプロジェクトで（最初のSASSを削除）

{ test: /\.scss$/, loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap']}, 

：私は次のようにあなたの最初のローダを変更しようとします。次に例を示します。

var PortfolioPiece = React.createClass({ 
    render: function() { 
    return (
     <div 
     className="wrapper" 
     style={{ backgroundImage: `url(${require('./my-img.png')})` }} 
     > 
    ); 
    } 
}); 

require('./my-img.png')コールはこのイメージが住んでいるURLに解決されます。

サイドノート：コードにダブルアポストロフィとシングルアポストロフィを混在させます。あなたはどちらか一方に固執すべきです。