Elaborazione di asset statici nel server di sviluppo Web

Question

Eseguo webpack-dev-server dalla cartella principale del mio progetto. Ho beni cartella in /src/attività che viene copiato da CopyWebPackPlugin:

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

Se metto logo.png cartella attivi all'interno quindi Dopo l'esecuzione webpack-dev-assistente non posso accesso http://localhost/assets/logo.png file, ma può accedere al file http://localhost/src/assets/logo.png. Tuttavia, se corro in modalità di produzione, la situazione si capovolge.

Come configurare il server Webpack per rendere http://localhost/assets/logo.png file accessibile in modalità sviluppo?

Answer 1

È possibile indicare al webpack di utilizzare un percorso diverso durante il caricamento dal browser.

Nella sezione output del file di configurazione webpack aggiungere un campo publicPath che punta alla cartella assets.

webpack.config.js

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

Answer 2

vorrei aggiungere che è stato il contrario per me. Originariamente avevo le mie immagini e i file .obj/.mtl in una cartella public che esisteva nella radice della mia applicazione. Li ho spostati in una cartella assets creata nella cartella app.

Esecuzione di un npm install --save-dev copy-webpack-plugin e aggiungendo il

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

al file webpack.common.js risolto il mio problema.