webpack css-loader: impossible de charger un fichier png référencé comme url ('path') dans un fichier css

Question

Je fais mes premiers pas dans l'utilisation de webpack ... jusqu'ici pas très réussi. Dans mon fichier Css, il y a un fond d'image définie avec une url:

background-image: url("patterns/header-profile.png"); 

L'application craches spectaculairement le lancement avec cette erreur :

ERROR in ./~/css-loader?"modules":true,"sourceMap":true,"importLoaders":1,"localIdentName":"[local]__[hash:base64:5]"}!./~/postcss-loader!./src/assets/css/in 
spinia.css 

Module not found: Error: Can't resolve 'patterns/header-profile.png' in 'C:\---- absolute path ---\src\assets\css' 

d'abord tout cela est mon projet Structure:

./src/ 
    --> assets 
     --> patterns 
       --> header-profile.png 
     --> mystyle.css // <-- sos: this is where background img is defined 
--> index.html 
--> index.tsx 

Second c'est mon webpack.config.json:

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

// variables 
var isProduction = process.argv.indexOf('-p') >= 0; 
var sourcePath = path.join(__dirname, './src'); 
var outPath = path.join(__dirname, './dist'); 

// plugins 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    context: sourcePath, 
    entry: { 
    main: './index.tsx', 
    vendor: [ 
     'react', 
     'react-dom', 
     'react-redux', 
     'react-router', 
     'react-router-redux', 
     'redux' 
    ] 
    }, 
    output: { 
    path: outPath, 
    publicPath: './', 
    filename: 'bundle.js', 
    }, 
    target: 'web', 
    resolve: { 
    extensions: ['.js', '.ts', '.tsx'], 
    // Fix webpack's default behavior to not load packages with jsnext:main module 
    // https://github.com/Microsoft/TypeScript/issues/11677 
    mainFields: ['main'] 
    }, 
    module: { 
    loaders: [ 
     // .ts, .tsx 
     { 
     test: /\.tsx?$/, 
     loader: isProduction 
      ? 'awesome-typescript-loader?module=es6' 
      : [ 
      'react-hot-loader', 
      'awesome-typescript-loader' 
      ] 
     }, 
     // css 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      publicPath: './', 
      loader: [ 
      { 
       loader: 'css-loader', 
       query: { 
       modules: true, 
       sourceMap: !isProduction, 
       importLoaders: 1, 
       localIdentName: '[local]__[hash:base64:5]' 
       } 
      }, 
      { 
       loader: 'postcss-loader' 
      } 
      ] 
     }) 
     }, 
     // static assets 
     { test: /\.html$/, loader: 'html-loader' }, 
     { test: /\.png$/, loader: "url-loader?limit=10000" }, 
     { test: /\.jpg$/, loader: 'file-loader' }, 
    ], 
    }, 
    plugins: [ 
    new webpack.LoaderOptionsPlugin({ 
     options: { 
     context: sourcePath, 
     postcss: [ 
      require('postcss-import')({ addDependencyTo: webpack }), 
      require('postcss-url')(), 
      require('postcss-cssnext')(), 
      require('postcss-reporter')(), 
      require('postcss-browser-reporter')({ disabled: isProduction }), 
     ] 
     } 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     filename: 'vendor.bundle.js', 
     minChunks: Infinity 
    }), 
    new webpack.optimize.AggressiveMergingPlugin(), 
    new ExtractTextPlugin({ 
     filename: 'styles.css', 
     disable: !isProduction 
    }), 
    new HtmlWebpackPlugin({ 
     template: 'index.html' 
    }) 
    ], 
    devServer: { 
    contentBase: sourcePath, 
    hot: true, 
    stats: { 
     warnings: false 
    }, 
    }, 
    node: { 
    // workaround for webpack-dev-server issue 
    // https://github.com/webpack/webpack-dev-server/issues/60#issuecomment-103411179 
    fs: 'empty', 
    net: 'empty' 
    } 
}; 

Et enfin c'est la façon dont je requiers mystyle.css dans le dossier de l'index:

require('/assets/css/inspinia.css'); 

J'ai regardé autour stackoverflow, github et Google. J'ai vu que d'autres personnes ont fait face à des problèmes similaires. Mais je ne comprends pas les différentes solutions qu'ils ont appliquées (je suis nouveau sur webpack).

Toute aide serait grandement appréciée.

Answer 1

C'est la façon dont j'ai résolu ce problème sans vraiment comprendre pourquoi il a résolu mon problème (juste changer les propriétés autour de ...).

tout d'abord sur mon dossier de webpack.config.json je me suis assuré que cette publicPath est absolue ('/') et non relative ('./')

{ 
    output:{ 
    publicPath: '/' 
    } 
} 

En second lieu, dans mon index. tsx où je requiers mystyle.css, je me suis assuré qu'il est le chemin relatif:

require('./assets/css/mystyle.css') 

Et enfin à l'intérieur mystyle.css où je référence mes images, je me suis assuré qu'il est un chemin absolu (... fou. ..). Ainsi, par exemple, j'aurais:

background: url("/patterns/header-profile.png") 

Et ça fonctionne comme par magie! Quelqu'un pourrait expliquer ce qu'est la logique derrière cette configuration, cela m'aiderait beaucoup à comprendre comment fonctionne webpack en particulier quand il s'agit de fichiers CSS, ressources d'images et chemins absolus/relatifs.