Почему при сборке проекта вебпаком не отображаются картинки?

Question

[D1ma5ta]

Собираю проект при помощи webpack, и картинки которые загружаются из js файла не отображаются (Failed to load resource: the server responded with a status of 404 (Not Found)).
webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: {
    main: "./scripts/script.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
    publicPath: "",
  },
  mode: "development",
  devServer: {
    static: path.resolve(__dirname, "./dist"),
    open: true,
    compress: true,
    port: 8080,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: "/node_modules/",
      },
      {
        test: /\.(wav|mp3)$/i,
        type: "asset/resource",
      },
      {
        test: /\.(png|svg|jpg|gif|woff(2)?|eot|ttf|otf)$/,
        type: "asset/resource",
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            },
          },
          "postcss-loader",
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
    new MiniCssExtractPlugin(),
    new CleanWebpackPlugin(),
  ],
};

путь до картинки указан так:

{
    name: "left-4-dead-2",
    img: "../images/games/left-4-dead-2.jpeg",
    chance: 0.1,
    color: "#ff0200",
  },

Comments

[szQocks]

publicPath установи в "/" и добавь алиас для src папки хотя б

и на выходе кажется что у тебя и остаётся такой путь "../images/games/left-4-dead-2.jpeg" - тут явно выходит из главной директории и ищет картинку где-то в жопе

показывай как подключаешь картинки, больше конкретики, путь то видно а как подключаешь

[D1ma5ta]

szQocks, Вот так выглядит директория с проектом. Еще у меня после сборки почему-то папка dist пустая. Я полагаю так быть не должно.


в webpack.module.js дописал вот так:

entry: {
    main: "./scripts/script.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
    publicPath: "/",
  },

[szQocks]

D1ma5ta,

Я полагаю так быть не должно.

да явно не должно быть, в папке dist минимум должен быть Html файл, если его там нет, то предположу что нарушен порядок выполнения плагинов, то есть самым первым должен идти CleanWebpackPlugin а потом уже все остальные, но с эти не стакливался так как просто пользуюсь параметром clean: true в Webpack 5 версии, хотя они там вроде должны справа на лево работать на сколько помню, но может и забыл всякое бывает, в общем этот нюанс проверить тож над

ну пока хотя бы попробуй поменять их местами и глянем что там дальше, вообще ты вопрос задавал про картинки а у тебя сборка тупо пустая папка, прикольно

так же static в дев сервере, должен быть для статики в дев режиме, этот дев сервер и нужен лишь для дев режима а не для работы твоей сборки или раздачи статики в твоей сборке, у тебя статика раздается для папки dist, и я думаю что ты картинки не видишь потому что они даже и не раздаются как статика, потому что лежат в главной директории, а за статику у тебя отвечает папка dist

на самом деле тут много проблем, переписать это всё над хм

[D1ma5ta]

szQocks, Понял, попробую все заново переделать, может так найду в чем ошибка, спасибо за подсказки)

[szQocks]

D1ma5ta, я смотрел этот видос, в принципе он неплохой, есть что от туда подчерпнуть, на основе него можно сделать сборку совместно с документацией, желательно документацию хотя бы разок почитать всю, что бы понимать что там вообще есть и что можно добавить в свою сборку

чисто от себя мог бы наверное пару рекомендаций дать, юзать какой-нибудь swc-loader, так же в режиме разработки заменять MiniCssExtractPlugin.loader каким-нибудь style-loader для ускорения, так же поработать чуть чуть с кэшом в кофиге, либо его отключать полностью, либо частично - эта инфа так же есть в документации, например параметр cache: false вообще отключает кэш в вебпаке, так же в параметр devServer добавить allowedHosts: 'all', и минимум сделать алиас для src папки

пример настройки для swc-loader

{
          test: /\.jsx?$/,
          exclude: /(node_modules|bower_components)/,
          use: {
              loader: 'swc-loader',
              options: {
                jsc: {
                    parser: {
                        syntax: "ecmascript",
                        jsx: true,
                        decorators: false,
                        dynamicImport: true
                    },
                    "target": "es5"
                }
            }
          }
        }