Загрузчик файлов Webpack вставляет один и тот же URL в файл HTML и CSS - PullRequest
Новая
       61

Загрузчик файлов Webpack вставляет один и тот же URL в файл HTML и CSS

0 голосов
/ 19 сентября 2018

Проблема в том, что загрузчик файлов всегда вставляет один и тот же URL в файлы HTML и CSS.

У меня есть текущая структура проекта

File structure

Конфигурация загрузчика файлов Webpack 

        {
            test: /\.(gif|png|jpe?g|svg)$/i,
            use: [{
                    loader: 'file-loader',
                    options: {

                        name: '[name].[ext]',
                        outputPath: "assets/images",
                        publicPath: '../images'

                    }
                }

            ]
        }

Когда яuse publicPath: '../images' Он вставит текущий URL в файл HTML и CSS

HTML 

<img src='../images/team-1@2x.png'/>

CSS 

background-image: url(../images/test-image.jpg);

оба URL являютсято же самое, но это нормально для файла CSS.

Когда я использую publicPath: './assets/images', он вставляет текущий URL в файл HTML и CSS

HTML 

<img src='./assets/images/team-1@2x.png' />

CSS 

background-image: url(./assets/images/test-image.jpg);

оба URL одинаковы, но это нормально для HTML-файла.

На самом деле я хочу добиться того, чтобы загрузчик файлов вставлял разные URL-адреса в HTML иCSS файлы.

Похоже на это

HTML 

<img src='./assets/images/team-1@2x.png' />

CSS 

background-image: url(../images/test-image.jpg);

Как настроить Webpack для получения точно выше результата

1 Ответ

0 голосов
/ 19 сентября 2018

Пути к файлам могут быть легко преобразованы в абсолютные пути с помощью модуля path.

Добавьте следующее в начало вашей конфигурации веб-пакета, если его еще нет: 

var path = require('path');

ТогдаВы можете использовать это для разрешения абсолютных путей к различным каталогам, в зависимости от того, где находится текущий рабочий каталог.Например: 

publicPath: path.resolve('assets', 'images')

Вышеприведенное должно отлично работать для создания абсолютного пути к вашей папке assets / images.Это не даст вам точный результат, который вы запрашиваете в своем вопросе, но это должно по крайней мере решить вашу проблему.Если это не так, пожалуйста, сообщите мне, чтобы я мог помочь вам.

...