Comment rendre webpack moins verbeux?
Ceci est Le nouveau cauchemar de Wes Craven!
Pourquoi ai-je même besoin de cette horreur à chaque changement? Comment puis-je désactiver ces notifications?!
Vous pouvez ajouter --quiet et --no-info à la ligne de commande de webpack-dev-server: http://webpack.github.io/docs/webpack-dev-server.html#webpack-dev-server-cli
Si vous utilisez webpack en mode veille, vous pouvez y placer | awk '{if ($0 !~ /^ *\[[0-9]*\]/) {print} else {if ($0 ~ /\[built\]/) {print}}}', qui imprimera toutes les sorties sauf les fichiers qui n'ont pas été reconstruits.
Vous pouvez utiliser l'option --display de Webpack CLI pour définir la verbosité de la sortie de statistiques. Voici les valeurs disponibles .
Par exemple.
--display=minimal
J'ai légèrement modifié l'instruction grep de Haken pour qu'elle fonctionne lors du chargement initial et lors de la mise à jour de fichiers JS.
Voici l'extrait de code dans mon package.json.
scripts": {
"dev": "npm run dev | grep -v \"\\[\\d*\\]\""
}
Ceci filtrera toutes les lignes contenant des motifs tels que [231], [232], etc.
Utilisez les options de statistiques de webpack.
Par exemple, pour supprimer les centaines de lignes générées par des morceaux:
stats: {
chunks: false
}
Pour supprimer des informations sur les modules:
stats: {
chunkModules: false
}
Voir la documentation sur les statistiques pour beaucoup d’autres options.
De la documentation Webpack:
L'option de statistiques vous permet de contrôler avec précision quelles informations sur les ensembles sont affichées. Cela peut constituer un bon compromis si vous ne souhaitez pas utiliser quiet ou noInfo, car vous souhaitez obtenir des informations sur les ensembles, mais pas toutes.
Pour webpack-dev-server, cette propriété doit être dans l'objet devServer.
//example with module.exports in webpack.config.js
module.exports = {
//...
stats: 'minimal'
};
//example with dev-sever in webpack.config.js
dev-sever: {
//...
stats: 'minimal'
}
Voir la documentation pour d'autres options, y compris errors-only, none, verbose et plus.
Si vous utilisez karma-webpack , vous pouvez le placer dans votre fichier de configuration:
webpackMiddleware: {
noInfo: true,
stats: 'errors-only'
}
noInfo: false n'affiche aucune information sur la console (uniquement des avertissements et des erreurs) documentation
stats: 'errors-only' uniquement en sortie lorsque des erreurs surviennent documentation
À l'aide d'un fichier de configuration Webpack-Dev-Server, vous pouvez vous connecter à l'API.
L'utilisation de noInfo: true désactive les messages d'information, sauf erreur de votre part.
L'utilisation de quiet: true supprime toutes les informations de la console, même les erreurs.
Référence: https://webpack.github.io/docs/webpack-dev-server.html#api
quiet et no-info ne m'ont servi à rien. Au lieu de cela, j'ai utilisé un filtre grep.
npm run dev | grep -v "node_modules\|\[built\]"
Cela supprimera toute ligne contenant [built] ou node_modules, ce qui facilitera la visualisation des erreurs de construction réelles sans faire défiler plusieurs lignes de la sortie du terminal.
J'ai mis cela dans la section scripts de mon package.json afin que je puisse utiliser npm run dev-quiet pour obtenir le journal de sortie filtré.
Exécutez webpack avec l'option --hide-modules.
Si vous utilisez la version express, vous pouvez inclure l'option noInfo:
import webpackMiddleware from 'webpack-dev-middleware';
app.use(webpackMiddleware(compiler, {
noInfo: true
}));
Si vous utilisez webpack-dev-middleware , vous devez maintenant utiliser logLevel au lieu de noInfo dans les options de configuration ( à partir du 12/18/17 ).
Exemple:
require("webpack-dev-middleware")(compiler, {
logLevel: "warn", // set the logLevel
});