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: '/' 
    }, 
},