Загрузчик файлов Webpack выводит файлы в правильную папку в рабочей среде, но не в среде разработки.

Question

У меня есть проект JavaScript, который я создаю с помощью webpack, а затем обслуживаю с сервером express. js. Я также запускаю его в среде разработки с webpack-dev-server.

Я импортирую изображения с помощью плагина file-loader вот его конфигурация:

{
    test: /\.(png|svg|jpg|gif)$/,
    loader: 'file-loader?name=/[name].[ext]',
    options: {
      publicPath: '/',
      outputPath: 'public',
      name: '[name].[ext]'
    }
 }

Мне нужен изображения в go в папке public при сборке проекта. Мне также нужно было импортировать импортированный файл без имени папки, чтобы index. html мог видеть файлы в той же папке, что и он сам. так, например, когда я делаю

import far from 'assets/far.png'

, он дает мне просто /far.png. как и ожидалось

Когда он запущен в производстве, я получаю эту красивую структуру на root сервере.

Для моей производственной среды я использую express. js с этой самой базовой конфигурацией c:

const express = require('express')
const path = require('path')

const port = process.env.PORT || 3000
const app = express()

app.use('/', express.static('public'))

app.listen(port)

Я просто отправляю все в папке public через /

Проблема:

моя проблема возникает, когда я работаю в разработке с веб-пакетом -dev-сервер.

есть только один файл, который действительно делает это, и он заканчивается в public/public

, более того, если я действительно пытаюсь достичь изображения через : http://localhost:8080/public/public/close.png

Я получаю: Cannot GET /public/public/close.png

Есть ли способ настроить его так, чтобы он работал так же, как моя express среда prod?

здесь пакет. json:

{
  "name": "Iteration",
  "version": "0.1.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "start": "node server.js",
    "dev": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "babel": {
    "plugins": [
      [
        "module-resolver",
        {
          "root": [
            "./src"
          ]
        }
      ],
      "@babel/plugin-proposal-class-properties"
    ],
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "node": "current"
          }
        }
      ]
    ],
    "env": {
      "test": {
        "plugins": [
          "@babel/plugin-transform-modules-commonjs"
        ]
      }
    }
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less)$": "identity-obj-proxy"
    }
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.7.0",
    "babel-jest": "^24.9.0",
    "d3-scale": "^3.2.0",
    "enzyme": "^3.10.0",
    "express": "^4.17.1",
    "identity-obj-proxy": "^3.0.0",
    "simple-complex": "^0.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/plugin-transform-modules-commonjs": "^7.7.0",
    "@babel/preset-env": "^7.7.1",
    "babel-loader": "^8.0.6",
    "babel-plugin-module-resolver": "^3.2.0",
    "css-loader": "^3.2.0",
    "file-loader": "^6.0.0",
    "jest": "^24.9.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

и полный webpack.config.babel.js

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname,
    filename: 'public/bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader?modules=true']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        loader: 'file-loader?name=/[name].[ext]',
        options: {
          publicPath: '/',
          outputPath: 'public',
          name: '[name].[ext]'
        }
      }
    ]
  },
  mode: 'development'
}