Servant des ressources statiques dans le serveur de développement Webpack

Je lance webpack-dev-server à partir du dossier racine de mon projet. J’ai un dossier d’ actifs dans / src / assets qui est copié par CopyWebPackPlugin:

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

Si je mets logo.png à l’ intérieur du dossier d’actifs, 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 à http: // localhost / src / assets / logo. fichier png . Cependant, si je cours en mode production, la situation est à l’envers.

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

Vous pouvez dire à webpack d’utiliser un chemin différent lors du chargement depuis le navigateur.

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

webpack.config.js

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

J’appendais que c’était le contraire pour moi. J’avais initialement mes images et fichiers .obj/.mtl dans un dossier public qui existait à la racine de mon application. Je les ai déplacés dans un dossier d’ assets créé dans le dossier de l’ app .

Effectuer une npm install --save-dev copy-webpack-plugin et append le

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

dans le fichier webpack.common.js corrigé mon problème.