webpack 2とcssの背景画像

Question

私は反応アプリでwebpack2（私は非常に新しいです）を使用しています。 imgタグを使用してアプリ内で画像を読み込んでいるときは、すべて正常に動作します。しかし、CSS内の背景URLとしてイメージを使用するときは、私はそれを動作させることはできません。

これが私のWebPACKです：

`module.exports = { 
    devtool:isDev ? 'cheap-module-eval-source-map' : 'source-map', 
    entry: [ 
    'react-hot-loader/patch', 
    'webpack-hot-middleware/client', 
    './src/index.js' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoEmitOnErrorsPlugin() 
    ], 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     include: path.join(__dirname, 'src'), 
     use: [ 
      { 
      loader: 'babel-loader', 
      options: { 
       babelrc: false, 
       presets: [ 
       ['es2015', {modules: false} ], 
       'react', 
       'stage-2' 
       ], 
       plugins: ['react-hot-loader/babel'] 
      } 
      } 
     ] 
     }, 
     { 
     enforce: 'pre', 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'eslint-loader', 
     options: { 
      failOnWarning: true, 
      failOnError: true 
     } 
     }, 
     { 
     test: /\.scss$/, 
     use: ['style-loader', 'css-loader', 'sass-loader'] 
     }, 
     { 
     test: /\.(png|jpe?g|gif|ico)$/, 
     use: 'file-loader?name=assets/[name].[hash].[ext]' 
     }, 
     { 
     test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, 
     use: 'url-loader?limit=10000&mimetype=application/font-woff' 
     }, 
     { 
     test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, 
     use: 'url-loader?limit=10000&mimetype=application/font-woff' 
     }, 
     { 
     test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
     use: 'url-loader?limit=10000&mimetype=application/octet-stream' 
     }, 
     { 
     test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'file-loader' 
     }, 
     { 
     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url-loader?prefix=assets/[name].[hash].[ext]&limit=10000&mimetype=image/svg+xml' 
     }, 
    ] 
    }, 
    devServer: { 
    contentBase: './dist', 
    hot: true 
    } 
};` 

私はサーバとして明示JSを使用していますが、私はこれが問題に関係ないと思います。

その後、私のCSSファイルで、私は私が行けば、私はパスを変更した場合、私はエラーを取得するが、私は、絶対パスを使用する場合は、ネットワークタブは304を返し、エラーがないが、

background: url('/assets/logo.svg');

持っていますlocalhost/assets/logo.svgにはページをリロードするだけで、ロゴはロードされません。 多くのSOの質問を検索しましたが、私のコードで何がうまくいかないのか分かりません。

Answer 1

は、あなたが "/assets/logo.svg" を参照している：例えば、devServer.contentBaseはabsolute pathでなければなりません。私はあなたのサーバーが提供するパブリックパスだと思います。 イメージを相対パス、つまりファイルのパスからロードする必要があります。 「assets/logo.svg」に画像がある場合は、このURLを使用する必要があります。 資産は、あなたのイメージがあるフォルダです

background: url('assets/logo.svg'); 

。

Answer 2

あなたのwebpack-dev-server設定で問題が発生しています。あなたのCSSで

output: { 
    publicPath: '/', 
    path: __dirname + "/dist", 
    filename: "[name].js" 
},