web-dev-qa-db-fra.com

Comment recompiler webpack après avoir modifié des fichiers?

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'

},

node.jswebpack
21
BrunoLM

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.

44
Anonymous

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".

Plus d'informations

1
Peter Forgacs