0

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

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

3 ответа 3

1
  1. Вместо [folder] попробуй использовать [path] (слеш надо будет опустить)
  2. Когда используешь [path] или [folder] не используй outputPath: "img", у тебя дальше useRelativePath: true,

P.S. В случае есть будешь использовать [path][name].[ext] возможно потребуется опустить опцию useRelativePath: true,

Пример:

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

Перенос в конкретную папку с сохранением структуры:

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

Может ссылка на примеры поможет: https://webpack.js.org/loaders/file-loader/#examples

3
  • Образуется вот такая структура dist/src/img и только тут что нужно, по какой-то причине оно в создает в папке dist папку src prntscr.com/nd2bz5
    – uzi_no_uzi
    17 апр 2019 в 7:51
  • @uzi_no_uzi я чуть чуть запутался. :) Можете уточнить? Папка dist напрягает? 17 апр 2019 в 15:20
  • Я обновил ответ, добавив пример. Попробуйте. 17 апр 2019 в 15:29
0

В опции name укажите '[path][name].[ext]', а outputPath и useRelativePath уберите.

0

Предположим что вспомогательных файлы лежат в

src/assets

В папке assets у тебя есть папки fonts, image, и пр.

src/assets/fonts/Roboto.ttf

src/assets/images/background/background.png

Главная строка здесь options " file-loader "

{
  test: /(\.svg|\.jpg|\.gif|\.png|\.woff2?|\.eot|\.ttf|\.otf)$/,
  loader: 'file-loader',
  options: {
    name: file => {
      let dirNameInsideAssets = path.relative(path.join(__dirname, 'src', 'assets'), path.dirname(file));
      return `${dirNameInsideAssets}/[name].[ext]`;
    }
  }
}

Тогда на выходе ты получишь:

dist/fonts/Roboto.ttf

dist/images/background/background.png

Можно сказать папка assets теряется, но думаю суть ты понял.

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.