webpack css背景图片不显示？

Question

我已经用 webpack 创建了 html 样板。我面临的问题是，如果我在 scss 中调用图像，例如“背景：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: '/'
    },
},