node - webpack imagenes

Sirviendo activos estáticos en el servidor de desarrollo webpack

Question

Ejecuto webpack-dev-server desde la carpeta raíz de mi proyecto. Tengo una carpeta de activos en / src / assets que CopyWebPackPlugin copia:

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

Si pongo logo.png dentro de la carpeta de activos, luego de ejecutar webpack-dev-server no puedo acceder al archivo http://localhost/assets/logo.png , pero puedo acceder a http://localhost/src/assets/logo.png archivo http://localhost/src/assets/logo.png . Sin embargo, si corro en modo de producción, la situación cambia.

¿Cómo configurar el servidor webpack para hacer accesible el archivo http://localhost/assets/logo.png en modo de desarrollo?

Answer 1

Puedes decirle a webpack que use una ruta diferente al cargar desde el navegador.

En la sección de output de su archivo de configuración de webpack, agregue un campo publicPath apuntando a su carpeta de assets .

webpack.config.js

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

Answer 2

Yo agregaría que fue todo lo contrario para mí. Originalmente tenía mis imágenes y archivos .obj/.mtl en una carpeta public que existía en la raíz de mi aplicación. Los moví a una carpeta de assets que se creó en la carpeta de la app .

Realizando una npm install --save-dev copy-webpack-plugin y agregando el

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

al archivo webpack.common.js solucionó mi problema.