Webpack文件加載器無法導出圖像

我正在爲我的PHP和React項目使用webpack。我想使用webpack文件加載器從我的.scss文件加載背景圖像，但由於某些原因，我不知道，img-文件夾未被複制/導出到我的dist-文件夾。下面是webpack.config.js：Webpack文件加載器無法導出圖像

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' 
     ] 
    })  
    ] 
};

我也試過loader: 'file-loader?name=/dist/img/[name].[ext]',，但沒有運氣。

我的文件結構是這樣的：

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

然後在我的.scss我想這：

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

有沒有人有一個想法有什麼不對嗎？

來源

2017-09-20 Steve

嘗試導入圖像文件在腳本文件中的一個像

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

這會讓的WebPack瞭解的依賴並複製。

來源

2017-09-20 12:13:08

確定這工作到目前爲止，但如果該文件夾中有多個圖像呢？我不想導入每個單一的圖像文件 – Steve

https://stackoverflow.com/questions/37313954/how-to-url-loader-multiple-images-in-webpack還沒有嘗試過，但它看起來很有希望。 –

哦，男人認真嗎？爲什麼webpack使事情變得如此複雜？！？無論如何，感謝您的建議:-) – Steve

CSS/Sass加載器不會轉換以/開頭的網址，因此您的file-loader將不會在此處應用。

解決的辦法是使用相對路徑進行導入，如果你想讓它們被webpack處理。需要注意的是CSS和薩斯對相對進口沒有特殊的語法，所以下面是等價的：

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

如果你希望他們得到解決，就像一個模塊的WebPack提供了一個~開始導入路徑的可能性如sass-loader - imports所示。

來源

2017-09-20 12:33:59

當我做'url（'./ img/someimage.jpg''）'我得到'模塊沒有找到：錯誤：無法解析'/ img/someimage.jpg' ： -/ – Steve

路徑必須正確，與其他任何JavaScript導入一樣。我沒有看到你的CSS在另一個目錄中。所以它應該是：'url（'../ img/someimage.jpg'）'。 –

Webpack文件加載器無法導出圖像

回答

相關問題