Webpack - фоновые изображения без загрузки

Я новичок в webpack, но имею некоторые проблемы с css-загрузчиком или файловым загрузчиком.

Я пытаюсь загрузить фоновое изображение, но оно работает неправильно. Фоновое изображение не отображается, хотя devtools показывают стиль background-image.

Если я скопирую стиль background-image в блок element.style, все будет хорошо. Я где-то делаю глупую ошибку?

Тег тела должен иметь фоновое изображение. Стиль появляется в инструментах разработчика, и ошибок нет:

1

Я могу загрузить файл 5a09e4424f2ccffb6a33915700f5cb12.jpg, но тело не имеет фона.

Если я вручную скопирую и вставляю css-строку в element.style в DevTools, все работает:

2

Это происходит, если я свяжусь с webpack-dev-server или просто webpack и в Chrome и Firefox.

Другие стили, такие как body { background-color: red }, работают нормально.

Это webpack.config.js:

const path = require('path');

module.exports = {
    "entry": [
        './src/index.js'
    ],
    "output": {
        "path": path.join(__dirname, 'build'),
        "filename": "bundle.js"
    },
    devtool: "source-map",
    "module": {
        "loaders": [
            {
                "test": /\.scss$/,
                "loaders": ["style", "css?sourceMap", "sass?sourceMap"]
            },
            { 
                test: /\.jpg$/, 
                loader: "file-loader" 
            }
        ]
    },
    devServer: {
        contentBase: './build'
    }
};

Ответы

Ответ 1

В настоящее время существует ошибка при использовании sourceMap с css-загрузчиком. Удаление исходной карты из загрузчика css должно быть исправлено.

"module": {
    "loaders": [
        {
            "test": /\.scss$/,
            "loaders": ["style", "css", "sass?sourceMap"]
        },
        { 
            test: /\.jpg$/, 
            loader: "file-loader" 
        }
    ]
}

Проблема связана с: https://github.com/webpack/css-loader/issues/296

Ответ 2

После борьбы с этой проблемой в течение дня я, наконец, выяснил, как переписывать URL-адреса внутри css, используя postcss

webpack.config.js

const _ = require('lodash');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const argv = {
    verbose:    _.includes(process.argv, '-v') || _.includes(process.argv, '--verbose'),
    json:       _.includes(process.argv, '--json'),
    production: _.includes(process.argv, '--production'),
};
module.exports = {
    cache:   true,
    devtool: argv.production ? "source-maps" : "eval",
    output: {
        path: 'public/build',
        filename: '[name].js',
        publicPath: "/build/",
        pathinfo: true // use with devtool: "eval",
    },
    resolve: {
        modulesDirectories: ['node_modules'],
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.less$/,
                loader: argv.production
                    ? ExtractTextPlugin.extract('style-loader?sourceMap=1', [
                        'css-loader?sourceMap=1&importLoaders=1',
                        'postcss-loader?sourceMap=1',
                        'less-loader?sourceMap=1'
                    ]) : [
                        'style-loader?sourceMap=1',
                        'css-loader?sourceMap=1&importLoaders=1',
                        'postcss-loader?sourceMap=1',
                        'less-loader?sourceMap=1'
                    ].join('!')
            },
            {
                test: /\.css$/,
                loader: argv.production
                    ? ExtractTextPlugin.extract('style-loader?sourceMap=1', [
                        'css-loader?sourceMap=1&importLoaders=1',
                        'postcss-loader?sourceMap=1',
                    ]) : [
                        'style-loader?sourceMap=1',
                        'css-loader?sourceMap=1&importLoaders=1',
                        'postcss-loader?sourceMap=1',
                    ].join('!')
            },
        ]
    }
}

postcss.config.js

const argv = {
    verbose:    _.includes(process.argv, '-v') || _.includes(process.argv, '--verbose'),
    json:       _.includes(process.argv, '--json'),
    production: _.includes(process.argv, '--production'),
};
module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: [
                "> 5%",            // https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0
                "last 2 versions", // http://caniuse.com/
            ]
        }),
        require('postcss-url-mapper')(function(url) {
            return argv.production ? url : url.replace(new RegExp('^/'), 'http://localhost:3000/');
        })
    ]
};

Ответ 3

Кажется, что браузеры не любят относительные пути к фоновым изображениям на теге тела. (см. также Фоновый образ CSS не загружается и css background-image не работает должным образом)

Смена кода слегка показала трюк:

  • измените URL-адрес на абсолютный URL-адрес: background-image: url(http://localhost:8080/5a09e4424f2ccffb6a33915700f5cb12.jpg). Это вряд ли идеально.
  • добавить класс в тело и изменить стили для ссылки на этот класс:
<body class="foo">

.foo {
    background-image: url('../img/test.jpg');
}

Ни один из них не может решить настоящий вопрос, но вы можете отклеиться.

Ответ 4

Webpack генерирует css и <link> через URL-адреса blob:, что, по-видимому, вызывает проблемы с загрузкой фоновых изображений.

Обходное решение для разработки
Встроить изображения через файловый загрузчик в разработке (создает большую строку base64 в css)
Но позволяет осуществлять горячую перезагрузку.

Обходное решение для продуктов
Используйте ExtractTextPlugin для обслуживания css в качестве обычного файла.

Ответ 6

Вы также можете попробовать использовать ~ перед вашими файлами, чтобы веб-пакет возвращался к загрузчикам require, чтобы разрешить URL.

background-url: (~assets/image/myimagefile);