webpack 2 및 css의 배경 이미지

Question

나는 반응 애플 리케이션에서 webpack2 (나는 아주 새것)를 사용하고 있습니다. img 태그를 통해 앱 내부에서 이미지를로드 할 때 모든 것이 잘 작동합니다. 하지만 CSS 내부의 배경 URL로 이미지를 사용할 때는 작동하지 않습니다.

`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" 
},