webpack css背景圖片不顯示？

Question

我用webpack創建了html樣板文件。我面臨的問題是，如果我在scss中調用圖像像「background：url（'/ img/img.png'）;」它沒有采取。在這裏，我附加了webpack文件和文件夾結構。我曾嘗試使用「url-loader」，這也不起作用。請幫助某人解決此問題，因爲我已經嘗試了很長時間才完成此操作，但仍無法找到解決方案。

這是我的文件夾結構，

Project 
    | 
    +-- html 
    | | 
    | +-- css 
    | +-- img 
    | +-- js 
    | +-- index.html 
    |  
    +-- src 
    | | 
    | +-- js 
    | +-- scss 

的WebPack文件

'use strict'; 
let webpack = require('webpack'); 
let path = require('path'); 
let nodeModulesPath = path.join(__dirname, 'node_modules'); 
let ExtractTextPlugin = require("extract-text-webpack-plugin"); 
let exp = []; // multiple exports array 

// Exports configs for each language 
let configs = [ 
    { 
     name: 'min', 
     entry: './src/index.js', 
     scssRule: { 
      test: /\.scss$/, 
      use: ExtractTextPlugin.extract({ 
       use: [{ 
        loader: "css-loader", 
        options: { minimize: true }, 
       }, 
       { 
        loader: "sass-loader", 
        options: { minimize: true }, 
       }, 
       ], 
       fallback: "style-loader" 
      }), 
     } 
    } 
]; 

// Generate exports module for each config 
for (let c of configs) { 
    var e = { 
     context: __dirname, 
     watch: true, 
     entry: c.entry, 
     output: { 
      path: path.resolve(__dirname, 'html/'), 
      //pathinfo: true, 
      filename: "js/app.js" 
     }, 
     module: { 
      rules: [{ 
       enforce: 'pre', 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: "jshint-loader" 
      }, 
      { 
       test: /\.css$/, 
       use: ExtractTextPlugin.extract({ 
        use: [{ 
         loader: "css-loader", 
         options: { minimize: true }, 
        }], 
        fallback: "style-loader" 
       }), 
      }, 
      c.scssRule, 
      { 
       test: /\.(ttf|eot|woff|woff2|svg)$/, 
       loader: 'file-loader', 
       options: { 
        name: '../[path].[ext]', 
        publicPath: '../', 
        emitFile: false 
       }, 
      }, 
      { 
       test: /\.(jpe?g|png|gif|svg)$/i, 
       loader: 'file-loader', 
       options: { 
        name: '../[path].[ext]', 
        publicPath: '../', 
        emitFile: false 
       }, 
      } 
      ] 
     }, 
     // Use the plugin to specify the resulting filename (and add needed behavior to the compiler) 
     plugins: [ 
      new ExtractTextPlugin({ 
       filename: 'css/app.css' 
      }), 
      new webpack.optimize.UglifyJsPlugin({ 
       compressor: { warnings: false } 
      }) 
     ] 
    } 
    exp.push(e); 
} 

module.exports = exp; 

Answer 1

的file-loader選項必須根據需要改變工作。您希望file-loader將文件發送到輸出目錄，否則您需要手動複製圖像而不是自動完成，因此您不應設置emitFile: false。

輸出目錄是html/，並與當前的名字../[path].[ext]你把文件輸出目錄（在你的項目的根目錄）之外，但這是不可取的，因爲你應該能夠爲是部署輸出目錄，而無需在其外添加任何內容（構建目錄可以被視爲服務器的根目錄）。另外[path]不包括文件名，但只包括它的路徑。假設你想要html/img/中的所有圖像，你可以使用name: 'img/[name].[ext]'。

公共路徑爲用作每個路徑的前綴，從不同的基URL爲它服務的時候，例如，如果你供職於/my-app/您的應用程序，它可以是有用的，你也將需要請求/my-app/img/name.png，而不是/img/name.png（公路徑照顧這個）。另請參閱output.publicPath。

兩個file-loader規則（字體和圖像）看起來是這樣的：

{ 
    test: /\.(ttf|eot|woff|woff2)$/, 
    loader: 'file-loader', 
    options: { 
     name: 'fonts/[name].[ext]', 
     publicPath: '/' 
    }, 
}, 
{ 
    test: /\.(jpe?g|png|gif|svg)$/i, 
    loader: 'file-loader', 
    options: { 
     name: 'img/[name].[ext]', 
     publicPath: '/' 
    }, 
},