Обслуживание статических активов в сервере webpack dev

Я запускаю webpack-dev-сервер из корневой папки моего проекта. У меня есть папка с ресурсами в /src/assets, которая копируется CopyWebPackPlugin:

new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ])

Если я поместил logo.png в папку с активами, то после запуска webpack-dev-сервера я не могу получить доступ к http://localhost/assets/logo.png файлу, но могу получить доступ к http://localhost/src/assets/logo.png. Однако, если я работаю в режиме производства, ситуация перевернута.

Как настроить сервер webpack для создания http://localhost/assets/logo.png файла, доступного в режиме разработки?

Ответ 1

Вы можете указать webpack использовать другой путь при загрузке из браузера.

В разделе output вашего конфигурационного файла webpack добавьте publicPath поле, указывающее на вашу папку assets.

webpack.config.js

output: {
  // your stuff
  publicPath: '/assets/'
}

Ответ 2

Я бы добавил, что для меня это было наоборот. Первоначально у меня были мои изображения и .obj/.mtl файлы в папке public, которая существовала в корне моего приложения. Я переместил их в папку assets, созданную в папке app.

Выполнение npm install --save-dev copy-webpack-plugin и добавление

new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ])

в файл webpack.common.js исправлена моя проблема.

Ответ 3

я использую прокси:

proxy: {
  '/static': {
      target: 'http://localhost:3333',
      pathRewrite: {'^/static' : '/app/static'}
   }
}