@uzi_no_uzi

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

К процессу сборки в 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


Как исправить?
  • Вопрос задан
  • 758 просмотров
Пригласить эксперта
Ответы на вопрос 1
@evmajoar
Front-End Developer
"Вместо тысячи слов" отвечаю на Ваш вопрос рабочим примером:

{
  test: /\.(png|jpe?g|gif|svg|webp)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[path][name].[ext]',
        context: path.resolve(__dirname, 'src'),
      },
    },
  ],
},
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы