Question

我用webpack创建了html样板文件。我面临的问题是，如果我在scss中调用图像，例如＆＃34; background：url（＆＃39; /img/img.png'）;＆＃34;它没有服用。在这里，我附加了webpack文件和文件夹结构。我曾经尝试使用＆＃34; url-loader＆＃34;，这也不起作用。请帮助某人解决这个问题，因为我已经尝试了很长时间才能完成这项工作，但仍然无法找到解决方案。

这是我的文件夹结构，

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]'。

公共路径在每个路径中都用作前缀，这在从其他基本网址提供服务时非常有用，例如，如果您在/my-app/上投放了应用，则还需要{{1}而不是/my-app/img/name.png（公共路径负责这一点）。另请参阅output.publicPath。

两个/img/name.png规则（字体和图片）可能如下所示：

file-loader

webpack css背景图片没有显示？

1 个答案: