J'utilise webpack avec deux points d'entrée:
entry: {
js: './assets/index.js',
css: './assets/sass/all.scss'
},
Je souhaite le configurer pour que lorsque je modifie un fichier js
ou scss
, il lance automatiquement Webpack à nouveau.
J'ai essayé d'utiliser webpack-dev-server
avec la commande:
webpack-dev-server --hot
On dirait qu'il est en train de reconstruire, il envoie le message
webpack: le paquet est maintenant VALIDE.
Cependant, si j'essaie d'actualiser le navigateur, je ne peux pas voir mes modifications. (Cache désactivé sur les outils de développement et Ctrl + F5 enfoncé). Le redémarrage du nœud ne fonctionne pas non plus, c'est comme s'il avait été construit ailleurs et non sur le fichier de sortie configuré:
output: {
path: path.join(__dirname, '/public'),
filename: 'bundle.js'
},
Si vous voulez que Webpack surveille les modifications, utilisez simplement l'indicateur watch
:
webpack --watch
Avec cette option, Webpack surveillera les modifications et les recompilera.
Je ne suis pas un expert de Webpack, mais ce que j'ai trouvé, c'est que Webpack-dev-server n'écrit pas sur le disque. Il sert le résultat à partir de la mémoire via l'instance Express utilisée pour servir les fichiers.
Vous pouvez le tester en modifiant le chemin localhost: 8080/webpack-dev-server/bundle.js dans votre fichier html. Si vous exécutez le serveur webpack-dev, les modifications doivent apparaître.
La bonne façon de le gérer est de mettre à jour votre webpack.config.js avec une propriété publicPath:
output: {
path: path.join(__dirname, '/public'),
filename: 'bundle.js',
publicPath: "/public/"
}
Dans ce cas, la balise de script doit faire référence à src = "public/bundle.js".