Webpack создает хэшированные имена файлов для изображений в проекте

Question

В один из компонентов в моей папке client / components я импортирую три изображения из папки public / images. В какой-то момент webpack создал файл для каждого изображения с хэшированными именами, такими как: 0e8f1e62f0fe5b5e6d78b2d9f4116311.png. Если я удаляю эти файлы, они не воссоздаются, и я хотел бы, чтобы в веб-пакете просто использовались изображения из папки с изображениями.

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

root
├── client
│   └── components
├── database
├── public
│   ├── images
│   ├── app.js
│   └── index.html     
└── server
    └── server.js

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './client/index.js'),
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'env']
        },
      },
      { 
        test: /\.png$/,
        use: 'file-loader'
      }
    ],
  },
  output: {
    path: path.join(__dirname, '/public'),
    filename: 'app.js',
  }
};

Выше моя файловая структура. Я пытался поиграть с моим текущим конфигом, но я борюсь с настройкой веб-пакета. Буду признателен за любую помощь по этим вопросам.

Answer 1

Вы можете сохранить исходное имя файла / путь с помощью следующей опции.

{
  test: /\.png$/,
    loaders: 'file-loader',
    options: {
      name: '[path][name].[ext]',
    },
},

Если вам действительно нужно использовать оригинальный файл (не файл, сгенерированный веб-пакетом), Вы не должны использовать файл-загрузчик.
Просто загрузите файл изображения и сделайте тег img для этого файла.