Webpack-dev-server compile les fichiers sans actualiser ni rendre javascript compilé disponible pour le navigateur
J'essaie d'utiliser webpack-dev-server pour compiler des fichiers et démarrer un serveur Web dev.
Dans mon package.json, la propriété de script est définie sur:
"scripts": {
"dev": "webpack-dev-server --hot --inline",
}
Donc, le --hot et le --inline devraient activer le serveur Web et le rechargement à chaud (si je comprends bien).
Dans mon fichier webpack.config.js, je définis les paramètres d'entrée, de sortie et devServer, puis ajoute un chargeur pour rechercher les modifications dans les fichiers .vue:
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public',
publicPath: '/public',
filename: 'bundle.js'
},
devtool: 'source-map',
devServer:{
contentBase: __dirname + '/public'
},
module:{
loaders:[
{ test: /\.vue$/, loader: 'vue'}
]
}
};
Donc, avec cette configuration, je lance npm run dev. Webpack-dev-server démarre, le test du chargeur de module fonctionne (lorsque je sauvegarde un fichier .vue, il provoque la recompilation de webpack), mais:
- Le navigateur ne rafraîchit jamais
- Le javascript compilé qui est stocké en mémoire n'est jamais mis à la disposition du navigateur.
Je peux voir cela dans cette seconde puce car, dans la fenêtre du navigateur, les espaces réservés de vue ne sont jamais remplacés et si j'ouvre la console javascript, l'instance de Vue n'est jamais créée ni mise à disposition de manière globale.
Qu'est-ce que je rate?
Deux choses causaient mes problèmes ici:
module.exports = {
entry: './src/index.js',
output: {
// For some reason, the `__dirname` was not evaluating and `/public` was
// trying to write files to a `public` folder at the root of my HD.
path: __dirname + '/public',
// Public path refers to the location from the _browser's_ perspective, so
// `/public' would be referring to `mydomain.com/public/` instead of just
// `mydomain.com`.
publicPath: '/public',
filename: 'bundle.js'
},
devtool: 'source-map',
devServer:{
// `contentBase` specifies what folder to server relative to the
// current directory. This technically isn't false since it's an absolute
// path, but the use of `__dirname` isn't necessary.
contentBase: __dirname + '/public'
},
module:{
loaders:[
{ test: /\.vue$/, loader: 'vue'}
]
}
};
Voici le webpack.config.js fixe:
var path = require('path');
module.exports = {
entry: [
'./src/PlaceMapper/index.js'
],
output:{
filename: 'bundle.js',
path: path.resolve(__dirname, 'public/')
},
devtool: 'source-map',
devServer:{
contentBase: 'public'
},
module:{
loaders:[
{ test: /\.vue$/, loader: 'vue'}
]
}
};
Après une longue recherche, j'ai trouvé la solution à mon problème, dans mon cas chemin de sortie n'était pas configuré correctement.
Cette configuration a résolu mon problème:
const path = require('path');
module.exports = {
"entry": ['./app/index.js'],
"output": {
path: path.join(__dirname, 'build'),
publicPath: "/build/",
"filename": "bundle.js"
}....
J'ai eu le même problème et je trouve qu'en plus de tous ces points, nous devons également placer le fichier index.html avec le fichier bundle.js en sortie dans le même dossier et définir le contentBase sur ce dossier, la racine ou un sous-dossier .
Cela peut arriver à cause de ExtractTextPlugin . Désactivez ExtractTextPlugin en mode de développement. Utilisez-le uniquement pour la production de production.
Cela m'est aussi arrivé après avoir exécuté deux applications différentes sur le même port webpack-dev-server l'une après l'autre. Cela s'est produit même si l'autre projet avait été arrêté. Quand j'ai changé pour un port qui n'avait pas été utilisé, il a commencé à fonctionner directement.
devServer: {
proxy: {
'*': {
target: 'http://localhost:1234'
}
},
port: 8080,
Host: '0.0.0.0',
hot: true,
historyApiFallback: true,
},
Si vous utilisez Chrome comme moi, ouvrez simplement Developer Tools et cliquez sur Clear site data. Vous pouvez également voir si tel est le problème en exécutant le site en mode de navigation privée.
D'une certaine manière, pour mon cas, supprimer "--hot" le fait fonctionner. Donc, j'ai enlevé hot: true
webpack.dev.js
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
publicPath: '/js/',
contentBase: path.resolve(__dirname, 'docs'),
watchContentBase: true,
}
});
webpack.common.js
output: {
path: path.resolve(__dirname, 'docs/js'),
filename: '[name].min.js',
library: ['[name]']
},
J'ai connu une situation similaire où webpack-dev-server servait mon fichier index.html mais ne se mettait pas à jour. Après avoir lu quelques articles, je me suis rendu compte que webpack-dev-server ne génère pas de nouveau fichier js mais en injecte un dans index.html.
J'ai ajouté le html-webpack-plugin à mon application et la configuration suivante dans mon fichier webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
})
]
J'ai ensuite commenté la balise de script référençant mon fichier js d'entrée dans index.html. Je peux maintenant exécuter webpack-dev-server sans aucun indicateur supplémentaire et toute modification apportée à mes fichiers s'affichera instantanément dans le navigateur.
Je vais ajouter mon propre récit spécial de Webpack --watch malheur au mur de la souffrance ici.
Je courais
webpack --watch
afin de construire un projet TypeScript. Les fichiers .js compilés se mettraient à jour, mais l'ensemble que le navigateur voyait ne le ferait pas. J'étais donc fondamentalement dans la même position que le PO.
Mon problème est tombé sur le paramètre watchOptions.ignored. L'auteur original de la configuration de construction avait configuré ignored en tant que fonction de filtrage, ce qui s'avère ne pas être une valeur valide pour ce paramètre. Le remplacement de la fonction de filtre par un RegExp approprié a permis à la version --watch de fonctionner à nouveau pour moi.
la bonne solution
Indiquez dev-server à watch les fichiers servis par l'option devServer.watchContentBase .
Il est désactivé par défaut.
Lorsque cette option est activée, les modifications de fichier déclenchent un rechargement complet de la page} _.
Exemple:
module.exports = {
//...
devServer: {
// ...
watchContentBase: true
}
};
L'arborescence de votre projet n'est pas claire. Toutefois, le problème peut provenir du paramètre contentBase. Essayez de définir contentBase: __dirname
Mon cas était que je m'étais tellement investi dans l'expérimentation des fonctionnalités de Webpack, mais que j'avais complètement oublié que j'avais réglé le mot inject pour être faux tout le temps, comme ça ...
new HTMLWebpackPlugin({
inject: false,
...
}),
Allumer ça était mon billet.