Webpack 5 как настроить правильную сборку изображений?
Правильное решение для Webpack 5
module.exports = {
   ...
   output: {
     ...
     assetModuleFilename: 'assets/images/[name][ext]'
   },
   module: {
     rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
     ],
   },
 };
Обратился к разработчику сборки. Получил следующий ответ:
Изображения, которые используются в скрипте, должны храниться в src/images. В public хранятся файлы, которые используются в template.html напрямую. В разметке вместо "../public" следует указывать "./assets", например:
<div id="root">
  <!-- на самом деле изображение хранится в ../public/images -->
  <img src="./assets/images/example.jpg" />
</div>
Еще один момент: в webpack.common.js и webpack.prod.js значение publicPath в output надо изменить на "./" (поставить точку в начале).
