web-dev-qa-db-fra.com

Gestion d'actifs statiques dans un serveur de développement Webpack

J'exécute webpack-dev-server à partir du dossier racine de mon projet . J'ai le dossier assets dans / src/assets qui est copié par CopyWebPackPlugin:

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

Si je mets logo.png dans le dossier assets, puis, après avoir exécuté webpack-dev-server, je ne peux pas accéder au fichier http: //localhost/assets/logo.png, mais je peux accéder au fichier. http: //localhost/src/assets/logo.png fichier. Cependant, si je cours en mode de production, la situation se renverse.

Comment configurer le serveur Webpack pour rendre le fichier http: //localhost/assets/logo.png accessible en mode développement?

webpackwebpack-dev-server
44
Rem

Vous pouvez indiquer à WebPack d'utiliser un chemin différent lors du chargement à partir du navigateur.

Dans la section output de votre fichier de configuration webpack, ajoutez un champ publicPath pointant vers votre dossier assets.

webpack.config.js

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

J'ajouterais que c'était le contraire pour moi. À l'origine, mes images et mes fichiers .obj/.mtl se trouvaient dans un dossier public situé à la racine de mon application. Je les ai déplacés dans un dossier assets créé dans le dossier app.

Effectuer un npm install --save-dev copy-webpack-plugin et ajouter le 

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

au fichier webpack.common.js résolu mon problème.

32
Katana24

j'utilise un proxy:

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