Как правильно установить outputPath для file-loader?

Question

[uzi_no_uzi]

К процессу сборки в webpack подключил file-loader таким образом.

{
  test: /\.(jpe?g|png|gif|svg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
                    name: "[name].[ext]",
                    outputPath: "img",
                    useRelativePath: true,
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
          quality: 65
        },
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: '65-90',
          speed: 4
        },
        gifsicle: {
          interlaced: false,
        },
        svgo: {
          enabled: false,
        }
      }
    }
  ]
},

До обработки, картинки лежат по такому пути:

--src
----img
------logo.jpg
------backgrounds
--------img1.jpg
--------img2.jpg
------icons
--------icon1.svg
--------icon2.svg

После обработки картинки сохранятся по такому пути, т.е. не сохраняется структура:

--dist
----img
------logo.jpg
------img1.jpg
------img2.jpg
------icon1.svg
------icon2.svg

Пробовал делать вот так: name: "[folder]/[name].[ext]",

Все картинки по внутренних папках сохраняются верно, т.е. структура сохраняется, но для тех картинок, которые были первоначально в src/img, создается папка в dist/img, т.е. получается так dist/img/img/logo.png

Для того чтобы было понятнее:

--dist
----img
------img
--------logo.jpg
------backgrounds
--------img1.jpg
--------img2.jpg
------icons
--------icon1.svg
--------icon2.svg

Как исправить?

Comments

[motr]

Вы не нашли решение проблемы? Столкнулся с аналогичной ситуацией.

UPD

Может кому поможет, решил проблему с file-loader, добавив context:

module.exports = {
  context: path.resolve(__dirname, 'src'),
}

а в самом file-loader:

loader: 'file-loader',
  options: {
    name: '[path][name].[ext]',
  },

и ещё добавил плагин copy-webpack-plugin для копирования изображений, подключенных в html:

new CopyPlugin([{ from: './img', to: 'img' }]),

[Alex_87]

motr, у меня с этими путями тоже проблема. Посмотрите пожалуйста мой вопрос: Как настроить пути к картинкам в CSS при билде в webpack?

Answer 1

[evmajoar]

"Вместо тысячи слов" отвечаю на Ваш вопрос рабочим примером:

{
  test: /\.(png|jpe?g|gif|svg|webp)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[path][name].[ext]',
        context: path.resolve(__dirname, 'src'),
      },
    },
  ],
},