イメージをエクスポートしていないWebpackファイルローダー

Question

PHPとReactプロジェクトにwebpackを使用しています。 .scssファイルからwebpackファイルローダでバックグラウンドイメージをロードしたいのですが何らかの理由で私が知らないと、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

が、これはWebPACKの依存関係について知っていると、それをコピーします

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

のようなあなたのスクリプト・ファイルのいずれかに画像ファイルをインポートしてください。

Answer 2

CSS/Sassローダーは/で始まるURLを変換しないため、file-loaderはここでは適用されません。

解決策は、webpackで処理する場合は、インポートの相対パスを使用することです。そのCSSを注意し、サスは、以下が等価であるので、相対的な輸入のために特別な構文を持っていない：あなたは彼らだけのモジュールのように解決されるようにしたい場合は

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

、WebPACKのは~でインポートパスを開始する可能性を提供していますsass-loader - importsに示すように、