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?
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
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.
--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
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
Solution de travail à 100%
Vous devez simplement suivre 3 étapes et vous obtiendrez votre rechargement à chaud comme prévu
Votre configuration devrait ressembler à ceci -
output: { path: __dirname, publicPath:"/dist/js/", filename: './dist/js/bundle.js' }
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 /"
<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 --watch
in dans une autre fenêtre
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": "*" },
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
},
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é.