webpack 2 und hintergrundbilder in css

Question

ich benutze webpack2 (ich bin sehr neu dazu) in einer react app. Alles funktioniert gut, wenn ich Bilder über das img-Tag in die App geladen habe. Aber ich kann es nicht funktionieren lassen, wenn ich das Bild als Hintergrund-URL innerhalb des CSS benutze.

das ist mein 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 
    } 
};` 

ich Express.js als Server verwenden, aber ich denke, das ist für das Problem nicht relevant ist.

dann in meiner CSS-Datei Ich habe

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

Wenn ich den Pfad ändern bekomme ich einen Fehler, aber wenn ich den absoluten Pfad verwenden, ist kein Fehler, die Netzwerk-Registerkarte gibt 304 aber wenn ich gehen Nach localhost/assets/logo.svg wird die Seite einfach neu geladen und das Logo wird nicht geladen. Ich habe in vielen SO Fragen gesucht, aber ich kann nicht herausfinden, was nicht an meinem Code arbeitet.

Answer 1

in Ihrem CSS, Sie beziehen sich auf "/assets/logo.svg". Ich denke, das ist der öffentliche Pfad, der von Ihrem Server bedient wird. Sie müssen das Bild aus dem relativen Pfad laden, den Pfad, in dem sich Ihre Datei befindet. Wenn Sie Ihr Bild in "assets/logo.svg" haben, müssten Sie diese URL verwenden.

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

Wo Vermögenswerte ist der Ordner, in dem Bild ist.

Answer 2

Es sieht aus wie ein Problem in Ihrer webpack-dev-server Konfig. Zum Beispiel sollte devServer.contentBase ein absolute path sein:

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