Si je mets en place un projet webpack très simple et installe webpack-dev-server, lorsque j'exécute "webpack-dev-server --open" depuis la ligne de commande ou via un script npm, j'obtiens un rechargement en direct par défaut. C'est à dire. dès que j'édite un fichier source, le bundle est reconstruit et le navigateur est automatiquement rechargé.

Cependant, si j'utilise l'API Node pour lancer le serveur webpack-dev-server à la place, avec le code suivant:

const WebpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');
const webpackConfig = require('../webpack.config.dev');
const open = require('open');

const port = 3000;

let compiler = webpack(webpackConfig);
let server = new WebpackDevServer(compiler, {
  contentBase: "./src",
});

server.listen(port, "localhost", function(err) {
  if(err){
      console.log(err);
  }
  else{
      open('http://localhost:' + port);
  }
});

Je perds le rechargement en direct. Lorsque je change un fichier source, je peux voir que webpack reconstruit le bundle à partir de la sortie de ligne de commande mais le navigateur ne s'actualise pas.

Veuillez noter que dans mon cas, le rechargement du module à chaud n'est pas nécessaire et n'est en fait pas souhaitable. Je veux juste que la page s'actualise exactement comme elle le fait par défaut lors de l'utilisation de l'interface de ligne de commande webpack-dev-server.

2
John 3 mai 2017 à 00:36

3 réponses

Meilleure réponse

Pour chaque entrée de votre configuration, ajoutez ceci: 'webpack-dev-server/client?http://localhost:8080', en remplaçant l'url dans la chaîne de requête par celle de votre serveur local.

L'ajout de ce point d'entrée signifie que vous devez utiliser un tableau pour vos points d'entrée. Cela peut se présenter de deux manières:

entry: ['webpack-dev-server/client?http://localhost:8080', 'app.js']

entry: {
  a: ['webpack-dev-server/client?http://localhost:8080', 'app.js'],
  b: ['webpack-dev-server/client?http://localhost:8080', 'other.js'],
}

Assurez-vous de ne l'utiliser que dans une configuration spécifique au développement.

Et c'est tout! J'ai remarqué ce détail en regardant cette vidéo YouTube, donc le mérite revient à l'auteur, mais après un examen plus approfondi du dépôt, il était dans l'exemple tout du long, mais pas très évident.

2
Shawn Erquhart 12 juin 2017 à 03:29

Laisser ceci principalement comme une note pour moi, mais d'autres peuvent en bénéficier: cela a fonctionné pour moi sur Lubuntu dans Virtualbox:

watchOptions: {
  poll: true
}

Remarque: lors de l'utilisation de l'API Node, l'option Webpack config devServer sera ignorée, vous devez passer les options devServer comme ceci:

 const s = new WebpackDevServer(compiler, {
  stats: {
    colors: true
  },
  inline: true,
  watchOptions: {
    poll: true
  }
});
0
Monarch Wadia 12 oct. 2017 à 03:16

Je cherchais sur SO et j'essayais toutes sortes de choses jusqu'à ce que je trouve ce qui suit pour webpack 2/3:

... webpackDevServer.addDevServerEntrypoints(config, options); ...

L'équipe Webpack a apparemment ajouté un util au module webpack-dev-server. Voir la documentation pour plus d'informations: https://webpack.js.org/guides/hot- remplacement de module /

Pour moi, cela fonctionne comme un charme.

5
nicoes 22 oct. 2017 à 07:36