webpack css-loader : CSS 파일 내에 url ('path')로 참조 된 png 파일을로드 할 수 없습니다.

Question

webpack 사용에 대한 첫 걸음을 내디뎠습니다.

이

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

앱을 화려이 오류와 함께 출시에 craches

:

이

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' 

이 모든 우선 내 프로젝트 내 .css 파일에서 는 URL로 정의 된 이미지 배경이 구조 :

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

둘째이 내 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' 
    } 
}; 

그리고 마침내 내가 인덱스 JS 파일에 mystyle.css 요구하는 방법입니다 :

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

I에 유래, github에와 구글 주위를 보았다는. 나는 다른 사람들이 비슷한 문제에 직면 해있는 것을 보았다. 하지만 저는 그들이 적용한 다양한 솔루션을 이해하지 못합니다 (저는 webpack을 처음 사용합니다).

도움을 주시면 감사하겠습니다.

Answer 1

내 문제를 해결 한 이유를 이해하지 않고이 문제를 해결 한 방법입니다 (속성을 변경하는 것만으로 ...). 내 webpack.config.json 파일에 모든

우선 나는이 publicPath 내 인덱스 ('/') 및 상대하지 ('./')

{ 
    output:{ 
    publicPath: '/' 
    } 
} 

둘째, 절대 것을 확인했다. 그것은 절대 경로 (미친 있는지

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

그리고 마지막으로 내 이미지를 참조 mystyle.css 내부

는, 내가 만든 : 나는 mystyle.css을 필요로 TSX, 나는 그것이 상대 경로인지 확인했다. ..). 예를 들어, 내가 가질 수있는 것 :

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

그리고 마술처럼 작동합니다!

누군가이 구성 뒤에있는 논리를 설명해 주면 css 파일, 이미지 리소스 및 절대/상대 경로와 관련하여 webpack 작동 방식을 이해하는 데 도움이 될 것입니다.