Как в webpack 5 картинки и шрифты закинуть в отдельные папки и работать с ними?

Question

[dmitry2000]

В webpack 5.6.0 картинки и шрифты автоматически переходят в корень проекта и структура получается кашевидная

Ранее, можно было воспользоваться file-loader'ом и сделать так:

{
        test: /\.(?:|gif|png|jpg|jpeg|svg)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: `./img/${filename('[ext]')}`
          }
        }],
      },

Оно и сейчас все нормально переносит, однако картинки, к примеру, также переносятся в корень и перестают отображаться на сайте. Как сейчас сделать правильно, чтобы картинки и шрифты были по папкам и всё работало? Читал доку, но не нашел там примеров с папками

Answer 1

[Михаил]

https://webpack.js.org/guides/asset-modules/#custo...

Comments

[dmitry2000]

Михаил чтобы были images и fonts, как сгенерировать? Там даже нет правила, только название папки, а как определить, что это, шрифт или картинка

[Михаил]

dmitry2000, по ссылке есть все ответы, прочитайте

[dmitry2000]

Михаил спасибо, попробовал то, что далее идет со static, но оно мне сгенерировало index файл в папке static с какими-то импортами, а в папку images сложило шрифты и картинки как и тогда. В принципе и так пойдет, картинки и шрифты в одном, но хотелось бы узнать, как разделить

Answer 2

[ruzzHammer]

В Webpack 5 используются Asset Modules вместо привычных raw-loader, file-loader, url-loader. Чтобы вернуть поведение 4й версии и пользоваться лоадерами, можно в правиле указать type: 'javascript/auto'.
Больше инфы по ссылке
Я использую следующий конфиг с ассет модулями, чтобы разложить картинки и шрифты по разным папкам, используя generator:

module: {
    rules: [
     ....
      {
        test: /\.(woff|woff2|ttf|otf|eot)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/fonts/[name][ext]'
        } 
      },
      {
        test: /\.(jpe?g|png|gif|svg|ico)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/img/[name][ext]'
        } 
      }
     ....
    ],
  },