Webpack не загружает изображения должным образом, получить 404, даже если они находятся в папке - PullRequest
Новая
       8

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

0 голосов
/ 29 мая 2018

У меня довольно легкий веб-пакет, настроенный для небольшого сайта.У меня есть куча изображений, загруженных из файла javascript в зависимости от разрешения экрана.

После сборки проекта я могу просто щелкнуть свой файл index.html, который выводится из html-webpack-plugin, и все работает.

Однако, когда я пытаюсь запустить через веб-пакет с webpack-dev-server, все образы на мне 404.

Вот инструменты для разработки с 404 404 error

и вот мой справочник

directory view

Я прочитал все, что смог получить.Я попробовал загрузчик файлов с футляром для изображений, и он ничего не сделал.Я передаю изображения с отзывчивым размером из Gulp, и именно HTML загружает изображения.Из всех руководств и документации по веб-пакетам изображения должны загружаться так же, как и они, если вы просто загружаете index.html в свой браузер!

Что дает?

Вот мой файл webpack.config.js 

const path = require("path");
const webpackDashboard = require('webpack-dashboard/plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: "./src/js/main.js",
    output: {
      path: path.resolve(__dirname, "./build"),
      filename: "bundle.js"
    },
    mode: 'production',
    module: {
      rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
              loader: "babel-loader",
              options: {
                presets: ["babel-preset-env"]
              }
            }
        },
        {
          test: /\.css$/,
          loaders: ["style-loader","css-loader"]
        }

      ]
    },
    plugins: [
      new webpackDashboard(),
      new HtmlWebpackPlugin
      ({
      filename: 'index.html',
      template: 'src/public/index.html'
      }),
      new HtmlWebpackPlugin
      ({
      filename: 'restaurant.html',
      template: 'src/public/restaurant.html'
      })
    ]
  };

Вот мой package.json (по какой-то причине, может быть, смеется) 

"scripts": {
    "gulp": "gulp",
    "babel": "babel src -d build",
    "build": "webpack --config webpack.config.js",
    "start": "webpack-dashboard -- webpack-dev-server build/bundle.js --open"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "copy-webpack-plugin": "^4.5.1",
    "css-loader": "^0.28.11",
    "del": "^3.0.0",
    "file-loader": "^1.1.11",
    "gulp": "^3.9.1",
    "gulp-responsive-images": "0.0.3",
    "html-webpack-plugin": "^3.2.0",
    "idb": "^2.1.2",
    "responsive-loader": "^1.1.0",
    "run-sequence": "^2.2.1",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.10.0",
    "webpack-cli": "^2.1.4",
    "webpack-css-loaders": "^1.0.0",
    "webpack-dashboard": "^2.0.0",
    "webpack-dev-server": "^3.1.4"
  }

Это было неприятнодля меня.Я программирую на JS только 2 месяца, так что извините, если это что-то очевидное, я пропускаю!

Заранее спасибо.Вот ссылка на github, если вам проще попробовать ее на практике! 

npm install && gulp && npm run build && npm run start

для установки модулей и раскрутки живого веб-сервера.

...