Webpack 파일 로더가 이미지를 내보내기하지 않습니다.

Question

PHP와 React 프로젝트에 webpack을 사용하고 있습니다. webpack 파일 로더와 함께 .scss 파일에서 배경 이미지를로드하고 싶지만 어떤 이유인지 모르겠지만 img -folder는 복사되지 않고 내 dist -folder 폴더로 내 보냅니다. 나는 또한 loader: 'file-loader?name=/dist/img/[name].[ext]',을 시도하지만 운

var webpack = require("webpack"); 
var path = require("path"); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var WatchLiveReloadPlugin = require('webpack-watch-livereload-plugin'); 

var DIST_DIR = path.resolve(__dirname, "dist"); 
var SRC_DIR = path.resolve(__dirname, "src"); 

var extractPlugin = new ExtractTextPlugin({ 
    filename: 'main.css' 
}); 

module.exports = { 
    entry: ['babel-polyfill', SRC_DIR + "/app/index.js"], 
    output: { 
     path: DIST_DIR + "/app", 
     filename: "bundle.js", 
     publicPath: "/dist" 
    }, 
    watch: true, 
    module: { 

     rules: [ 
      { 
      test: /\.js$/, 
      include: SRC_DIR, 
      loader: "babel-loader", 
      exclude: /node_modules/, 
      query: { 
       presets: ["react", "es2015", "stage-2"], plugins: ["transform-decorators-legacy", "transform-class-properties"] 
      } 
     }, 
     { 
      test: /\.scss$/, 
      use: extractPlugin.extract({ 
       fallback: "style-loader", 
       use: ["css-loader", "sass-loader", "resolve-url-loader"] 
       })     
     }, 
     { 
      test: /\.css$/, 
      use: ["css-loader", "sass-loader", "resolve-url-loader"] 
     }, 
     { 
      test: /\.(jpg|png)$/, 
      use: [ 
       { 
        loader: 'file-loader', 
        options: { 
         name: '[name].[ext]', 
         outputPath: 'img/', 
         publicPath: 'img/' 
        } 
       } 
      ] 
     }      
     ]   
}, 
plugins: [ 
    extractPlugin, 
    new WatchLiveReloadPlugin({ 
     port: 'localhost', 
     files: [ 
      './dist/app/*.css', 
      './dist/**/*.js', 
      './src/app/**/*.png', 
      './src/app/**/*.jpg', 
      './src/app/**/.*.scss', 
      './src/**/*.php', 
      './src//*.js' 
     ] 
    })  
    ] 
}; 

: 아래 webpack.config.js입니다.

내 파일 구조는 다음과 같다 : 나는이 시도 내 .scss에서 다음

-- dist 
    -- app 
     bundle.js 
     main.css 
-- src 
    -- app 
    -- css 
     main.scss 
    -- img 
     someimage.jpg 

:

background-image: url('/img/someimage.jpg'); 

사람이 여기에 문제가 있는지 아이디어가 있습니까?

Answer 1

는 웹팩 그것을 종속성에 대해 알고 및 복사하게됩니다

import '/path/to/img.jpg'; 

같은 스크립트 파일 중 하나의 이미지 파일을 가져보십시오.

Answer 2

CSS/Sass 로더는 /으로 시작하는 URL을 변환하지 않으므로 file-loader은 여기에 적용되지 않습니다.

해결 방법은 webpack에서 처리하려는 경우 가져 오기에 상대 경로를 사용하는 것입니다. 그 CSS를 참고 말대꾸 상대 수입에 대한 특별한 구문이 없기 때문에 다음과 동일합니다

url('img/someimage.jpg') 
url('./img/someimage.jpg') 

은 당신이 그들을 그냥 모듈처럼 해결하려면, 웹팩은 ~으로 수입 경로를 시작 할 수있는 가능성을 제공합니다 sass-loader - imports과 같이 표시됩니다.