Webpack - désactiver les requêtes vers /sockjs-node/info ou spécifier un port différent

Question

J'utilise Django et Vue ensemble et la combinaison fonctionne assez bien. Django fonctionne sur http 8000 et le serveur de développement webpack s'active sur le port 3000, les modifications de JS ou Vue sont compilées automatiquement et je n'ai plus qu'à recharger la page (ce n'est pas une application SPA).

Chargeur Django-webpack est utilisé pour servir les paquets via des balises comme :

<script type="text/javascript" src="http://localhost:3000/static_src/bundles/pssystem/data.js" ></script>

Je n'utilise pas Vue-CLI et je n'ai pas l'intention de passer d'un frontal Django à un frontal Node.

La vie est belle, tout le reste fonctionne bien.

La seule chose ennuyeuse, ce sont les demandes répétées comme celle-ci :

http://localhost:8000/sockjs-node/info?t=1607750560606

C'est ce que les devtools montrent pour les requêtes host:port. L'application est sur 8000 avec Django, 3000 avec devServer, socksjs doit être sur 3000 aussi.

Maintenant, Django ne trouve pas cette ressource et son journal s'encombre de 404. En fait, j'ai codé un 410 à la place, mais, non, Vue va juste faire un ping et un ping et un ping sur ce 410.

#urls.py
url("^sockjs-node/info", views.nodeinfo),

#views.py
def nodeinfo(request):
    return HttpResponseGone()

Maintenant, j'ai essayé de chercher ça. Les réponses sur le forum Vue sont multiples et la plupart impliquent de changer en vue.config.js situé à côté de paquet.json .

MISE À JOUR : comme je n'utilise PAS Vue-cli, il semble que les paramètres doivent aller dans webpack.config.js à la place.

Après avoir essayé 2 ou 3 des suggestions, dont la plupart ne semblent pas avoir beaucoup de sens (une question sur localhost se termine par un "correctif" consistant en une entrée devserver pointant sur 0.0.0.0 par exemple), aucune d'entre elles ne fonctionne.

devServer qui n'ont PAS aidé :

{
    hot: false,
    port: 3000
};

{public: 'localhost:3000'}

{sockPort: 3000}

{sockPort: 3000,sockHost: 'localhost'}

{inline: false}

Aucun des fils de discussion que j'ai vus ne semble contenir de réponses faisant autorité. Ou, plus probablement, je n'arrive pas à trouver la bonne réponse dans tout le bruit qui est posté.

(J'en ai vu un qui suggérait de modifier la commande webpack à la place en ajoutant --no-inline mais je ne l'ai pas encore essayé).

Je n'utiliserai pas node en production, je n'utiliserai que webpack pour regrouper les fichiers statiques. Je ne me soucie pas de https ici. Je ne me soucie pas non plus de faire fonctionner sockjs en reconfigurant des choses - les choses fonctionnent parfaitement bien sans ce qui manque, donc le désactiver ne peut pas faire de mal.

Je veux UNIQUEMENT que ces demandes cessent de sortir du code client. Entièrement. Comment je fais ça ?

(P.S. Si vous voulez répondre, veuillez indiquer de quelle manière le contenu que vous proposez de vue.config.js de régler le problème - j'ai juste vu trop de cela a réglé le problème sans la moindre information sur la manière dont le contenu de la configuration permet de désactiver cette fonction. Cela signifie que celui qui utilise cette solution ne la comprend pas et utilise une programmation de type "copier-coller").

Versions :

vue@2.6.11
webpack-dev-server@3.11.0
npm --version 6.14.6
node --version v10.15.0

Enfin, voici mes objectifs pour webpack :

• Regarder et une recompilation sur le serveur à chaque fois que je change les fichiers JS/Vue, les bundles sur 3000 sont rafraîchis.

• La fonctionnalité principale du serveur reste avec Django qui sert le html via des modèles côté serveur, sur un port différent de celui du devServer de node.

• Pas besoin de rechargement du module à chaud sur le client. Je peux parfaitement continuer à utiliser les paquets périmés jusqu'à ce que je rafraîchisse la page. Ce n'est pas, et ne pourrait pas être, une application SPA ou Node frontend. .

Answer 1

(Modification de l'OP : cette réponse a obtenu la prime, parce qu'elle m'a dit que Vue était moins pertinent ici que Webpack et parce que mon enquête sur l'option de configuration pertinente de Webpack n'a alors rien montré qui permette de désactiver ces demandes. Ce que je retiens pour l'instant, c'est que cela ne peut pas être fait d'après ce que j'ai compris Si Django sert à :8000, alors Webpack HMR's s'attend implicitement à pouvoir interroger le même hôte:port, sans option de réacheminement ou de désactivation. La réponse provisoire est donc plutôt non, c'est impossible ).

Puisque vous n'utilisez pas le CLI de Vue, vous aurez besoin d'un fichier webpack.config.js plutôt que vue.config.js . En supposant que votre devServer est en cours d'exécution à localhost:3000 (je ne suis pas certain de votre installation non standard), vous pouvez essayer ceci en webpack.config.js dans votre projet Root :

module.exports = {
  devServer: {
    host: 'localhost',
    port: 3000
  }
};

Si cela ne fonctionne pas, je vous recommande de recréer votre projet avec Vue CLI et d'utiliser un repo/ séparé. paquet.json pour votre backend dans un serveur dossier.

Answer 2

Pour ajouter à la réponse acceptée : Des demandes supplémentaires à http://localhost:8000/sockjs-node/info?t=123 avec le mauvais port peut être causé par un plugin webpack . Dans mon cas, le coupable était ReactRefreshWebpackPlugin. La solution était de dire à ce plugin sur quel port se trouvait le serveur de développement de webpack :

// …in webpack.config.js…

plugins: [
  isDevelopment && new ReactRefreshWebpackPlugin({
    overlay: {
      sockPort: 3000, // <-- Tell plugin which port WDS is running at
    },
  }),
].filter(Boolean),

devServer: {
  hot: true,
  port: 3000, // I used port 3000 here because of the setup in OP's question
}

Docs : https://github.com/pmmmwh/react-refresh-webpack-plugin