Почему webpack-dev-server не может найти файл в каталоге /public/assets?

Как можно настроить webpack-dev-server, чтобы при локальном запуске сборки просматривал файлы в директории public/assets, чтобы frontend-код мог получить доступ к этим файлам по адресу public/assets/test.json?
  • 9 января 2024 г. 8:28
Ответы на вопрос 2
`webpack-dev-server` обычно настраивается для обслуживания файлов из памяти для целей разработки, в то время как содержимое в директории `/public` может быть настроено для обслуживания как статические файлы. Если вы хотите, чтобы `webpack-dev-server` обслуживал файлы из директории `/public/assets`, вам нужно настроить middleware статических файлов в его конфигурации.

Для того чтобы добиться этого, можно воспользоваться опцией `static` в файле конфигурации webpack. Вот пример конфигурационного файла webpack, где включена директория `public/assets` как статическое хранилище:

```javascript
const path = require('path');

module.exports = {
  // ваша остальная конфигурация webpack
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      publicPath: '/public/assets',
      watch: true // чтобы отслеживать изменения в файлах
    },
  },
};
```

В данном примере:

- `directory`: путь к директории с вашими статическими файлами.
- `publicPath`: публичный URL-путь, который будет использоваться для доступа к статическим файлам. 
- `watch`: если `true`, `webpack-dev-server` будет отслеживать изменения в файлах в указанной директории.

Теперь, если у вас есть файл `test.json` в `public/assets`, вы сможете получить к нему доступ по адресу `http://localhost:port/public/assets/test.json`, где `port` будет портом, на котором работает ваш `webpack-dev-server`.

Убедитесь также, что в конфигурации вашего `webpack-dev-server` указан правильный порт (если он отличается от стандартного `8080`), используя свойство `port`:

```javascript
devServer: {
  static: {
    directory: path.join(__dirname, 'public'),
    publicPath: '/public/assets',
    watch: true
  },
  port: 3000 // предполагаемый номер порта, на котором должен запуститься сервер
},
```

Если вы всё ещё испытываете проблемы с доступом к вашим файлам после этих изменений, убедитесь, что:

1. Вы перезапустили `webpack-dev-server` после внесения изменений в конфигурацию.
2. Путь `publicPath` совпадает с тем, что используется в вашем коде.
3. Проверьте, что нет конфликтов в путях или других настройках в вашем файле конфигурации webpack.

Подробнее о настройке `webpack-dev-server` можно узнать в официальной документации: https://webpack.js.org/configuration/dev-server/#devserverstatic
В моём проекте использовался devMiddleware, который переопределял publicPath для всех статических файлов. 
Чтобы задать нужный publicPath, потребовалось переопределить его при подключении каждого статического каталога. Вот как это выглядит:
Похожие вопросы