Разрешение пути Webpack url() с помощью css-загрузчика

Я разрабатываю сайт и использую webpack по понятным причинам. Проблема, с которой я сталкиваюсь, связана с разрешением пути для изображений, которые импортируются в мой проект через мои файлы SCSS. Проблема в том, что css-loader не разрешает правильный путь. Кажется, что происходит следующее:

Если я разрешаю css-loader обрабатывать импорт url() (оставляя параметр url равным true), он перезаписывает путь к файлу относительно выходного каталога, указанного в ExtractCSSChunksPlugin(), например:

url('../img/an-image.jpg') следует переписать в url('http://localhost:3000/assets/img/an-image.jpg'), однако на самом деле выводится url('http://localhost:3000/assets/css/assets/img/an-image.jpg').

Если я изменю его на false, правильный путь будет разрешен, но file-loader не сможет найти изображения, а затем передать их.

Я знаю, что изображения выводятся, когда css-загрузчик обрабатывает разрешение URL-адреса, поскольку я вижу испускаемое сообщение при компиляции пакета - он не завершается ошибкой.

Я также могу получить изображения для отображения, если я вручную добавлю к ним вызовы импорта в точке входа JS, установим в поле entry:, а затем вызову абсолютный путь в SCSS. Но это нежелательно, так как с ростом проекта становится утомительно.

Я пытался использовать resolve-url-loader и изменять несколько настроек, но я просто не могу заставить это работать.

Я также пытался использовать параметр resolve: { alias: { Images: path.resolve(__dirname, 'src/assets/img/' } }, предоставленный webpack, а затем вызывать url('~Images/an-image.jpg') в моем SCSS, но он просто воспроизводит те же результаты.

Итак, в целом, моя проблема заключается в том, что мне нужно иметь возможность использовать относительные пути в моем SCSS, а затем переписать их на правильный путь одним из моих загрузчиков.

Моя текущая конфигурация веб-пакета (вывод файлов с помощью загрузчика файлов, но добавление assets/css/ к началу URL-адреса) выглядит следующим образом:

"use strict";
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common');
const ExtractCSSChunksPlugin = require('extract-css-chunks-webpack-plugin');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: [
        'webpack-hot-middleware/client',
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env'],
                  }
                }
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: ExtractCSSChunksPlugin.loader,
                        options: {
                            hot: true,
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                          }
                    }
                ]
            },
            {
                test: /\.html$/,
                use:['html-loader']
            },
            {
                test:/\.(svg|jpg|png|gif)$/,
                use: [{
                    loader:'file-loader',
                    options: {
                        publicPath: 'assets/img',
                        outputPath: 'assets/img',
                        name: '[name].[ext]',
                        esModule: false
                    }
                }],
            },
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractCSSChunksPlugin({
            filename: 'assets/css/[name].css',
            chunkFilename: 'assets/css/[id].css',
        }),
    ]
});

Заранее спасибо.


person MakingStuffs    schedule 17.12.2019    source источник


Ответы (2)


Итак, кажется, я исправил проблему, разрешив набор publicPath в поле конфигурации загрузчика файлов: publicPath: path.resolve(__dirname, '/assets/img').

Моя конфигурация сейчас:

"use strict";
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');
const ExtractCSSChunksPlugin = require('extract-css-chunks-webpack-plugin');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: [
        'webpack-hot-middleware/client',
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env'],
                  }
                }
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: ExtractCSSChunksPlugin.loader,
                        options: {
                            hot: true,
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                          }
                    }
                ]
            },
            {
                test: /\.html$/,
                use:['html-loader']
            },
            {
                test:/\.(svg|jpg|png|gif)$/,
                use: [{
                    loader:'file-loader',
                    options: {
                        publicPath: path.resolve(__dirname, '/assets/img'),
                        outputPath: 'assets/img',
                        name: '[name].[ext]',
                        esModule: false
                    }
                }],
            },
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractCSSChunksPlugin({
            filename: 'assets/css/[name].css',
            chunkFilename: 'assets/css/[id].css',
        }),
    ]
});

person MakingStuffs    schedule 17.12.2019

Я думаю, что добавление загрузчика URL-адресов в конфигурацию веб-пакета поможет.

{
  test: /\.(jpg|png)$/,
  use: {
    loader: "url-loader",
    options: {
      limit: 25000,
    },
  },
},
person Aphrem Thomas    schedule 17.12.2019
comment
Спасибо, приятель, это была конфигурация file-loader. Я не хотел использовать загрузчик URL-адресов, поскольку он просто кодирует все в base64, если вы не установите действительно высокий предел. - person MakingStuffs; 17.12.2019