web-dev-qa-db-fra.com

le rechargement à chaud de Webpack-dev-server ne fonctionne pas

Ma structure de fichier est:

dist
  css
    style.css
  index.html
  js
    bundle.js
src
  css
    style.css
  index.html
  js
    main.js
node_modules
webpack.config.js
package.json

Mon webpack.config.js ressemble à:

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: __dirname,
        filename: './dist/js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            }
        ]
    }
};

Je cours:

webpack-dev-server --content-base dist --hot

Et cela se construit et semble fonctionner. localhost: 8080 indique le résultat attendu, mais le rechargement à chaud ne fonctionne tout simplement pas. Lorsque je modifie un fichier, je vois dans le terminal qu’une reconstruction est en cours mais que rien ne se passe dans le navigateur. Est-ce que je manque quelque chose dans la config?

javascriptnode.jswebpackvue.js
12
riccardolardi

Lorsque webpack-dev-server est utilisé, tous les fichiers sont construits en interne et ne les crache pas dans votre chemin de sortie. Exécuter webpack seul, sans le serveur de développement, effectue la compilation sur le disque. Le serveur de développement fait tout en mémoire, ce qui accélère énormément la recompilation.

Pour résoudre votre problème de rechargement à chaud, définissez la base de contenu sur votre répertoire source et activez inline-mode

Ainsi:

webpack-dev-server --content-base src --hot --inline
15
Mario Tacke

Ce qui a fonctionné pour moi, c’est d’écrire <script src="bundle.js"> et non pas <script src="dist/bundle.js"> dans mon fichier index.html.

// index.html
<script src="bundle.js"></script>      // works
<script src="dist/bundle.js"></script> // doesn't work!

Conserver dist/bundle.js en tant que fichier de sortie fonctionne parfaitement si vous le générez simplement avec webpack. Toutefois, lorsque vous utilisez webpack-dev-server, le fichier statique déjà présent dans le système de fichiers continue à être servi, et non le dernier remplacement à chaud. Il semble que webpack-dev-server soit confus lorsqu'il voit dist/bundle.js dans le fichier html et ne le remplace pas à chaud, même si webpack.config.js est configuré sur ce chemin.

17
fafaro

--inline --hot n'était pas un problème pour moi

Si vous utilisez redux, essayez ceci.

Pour une raison quelconque, redux-devtools n'autorisait pas le rechargement à chaud. Essayez de le supprimer du composant racine et de redux compose config.

Remarque: Utilisez l’extension de navigateur redux devtool avec cette configuration dans la configuration de votre magasin: window.devToolsExtension ? window.devToolsExtension() : f => f

Aussi, doit lire: https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f

Ou essayez hot reload 3: Example: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915

1
Priyanshu Chauhan

Le rechargement à chaud Webpack a également cessé de fonctionner pour moi. La solution pour moi était de supprimer le dossier node_modules et de réinstaller toutes les dépendances. Ouvrez simplement le dossier parent de node_modules dans votre terminal et lancez npm install

1
Tom

Solution de travail à 100%

Vous devez simplement suivre 3 étapes et vous obtiendrez votre rechargement à chaud comme prévu

  1. Incluez la clé "publicPath" dans la propriété "Sortie" de webpack config. "publicPath" doit contenir le chemin d'accès à votre fichier bundle.js afin que dev-server sache s'il y a des changements dans votre fichier bundle.js et qu'il rechargera votre application.

Votre configuration devrait ressembler à ceci - 

output: {
   path: __dirname,
   publicPath:"/dist/js/",
   filename: './dist/js/bundle.js'
}
  1. Ajout de l'option "devServer" dans le fichier de configuration -
devServer:{
   contentBase:"/src/",
   inline:true,
   stats:"errors-only"
}

Veuillez noter que contentBase doit pointer sur le chemin où vous mettez votre fichier index.html qui contient votre balise script dans votre cas, il s'agira de "/ src /"

  1. Enfin, vous devez vous assurer que l'attribut 'src' de votre balise 'script' dans index.html pointe vers bundle.js à partir de " http: // localhost: port " comme suit - 

<script src="http://localhost:portnumber + value in publicPath + bundle.js"></script>

dans votre cas cela ressemblera à ceci - 

<script src="http://localhost:8080/js/dist/bundle.js" type="text/javascript"></script>

Et enfin, rappelez-vous le fichier webpack-dev-server doesn't compile your js file or make build or watch on your js qui contient tout ce que vous avez en mémoire pour regarder sur votre fichier js que vous devez exécuterwebpack --watchin dans une autre fenêtre

0
Jay Bidwai

Vérifiez les journaux de votre console si elle présente une erreur ci-dessous, puis ajoutez cors au fichier de votre serveur de développement webpack

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin react hot reload

Ajouter idéalement l'entrée ci-dessous dans votre serveur de développement js

headers: { "Access-Control-Allow-Origin": "*" },
0
Shadab Ahmed

Essaye ça:

Dans votre fichier package.json, supprimez la ligne contenant "test" "echo \"Error: no test specified\" && exit 1" sous l'objet scripts et remplacez-la par:

...
"scripts": {
    "start": "webpack-dev-server --hot"
  },

...

Ensuite, pour redémarrer votre projet, utilisez simplement npm start. 

Cela a fonctionné pour moi quand j'ai rencontré ce problème. 

Modifier: Pouvez-vous partager votre fichier package.json?

Essayez aussi d'ajouter ceci à webpack.config.js

devServer: {
  inline: true,
  port: 3000,
  hot: true
},
0
hammerabi

Aucune des options sur cette page n'a fonctionné pour moi. Après avoir modifié la section devServer pour:

devServer: {
    port: 8080,
    contentBase: ['./src', './public'], // both src and output dirs
    inline: true,
    hot: true
},

ça a marché.

0
Nelson Teixeira