web-dev-qa-db-fra.com

Webpack 4 - Cartes de navigation

Cet article webpack 4: mode et optimisation semble suggérer que lorsque mode est défini sur development, le devtool est défini sur eval.

Je m'attendais à ce que cela déclenche la génération d’une carte source, mais l’exécution du mode webpack-4-quickstart en mode development ou production ne génère aucune carte source.

Comment puis-je générer des cartes mères avec Webpack 4?

webpackwebpack-4
15
kimsagro

Je pense que ce que vous attendez est le fichier extrait , y compris les cartes source comme 'bundle.js.map', mais le type eval ne générer un fichier séparé:

eval - Chaque module est exécuté avec eval () et // @ sourceURL. C'est assez rapide. Le principal inconvénient est qu’elle n’affiche pas correctement les numéros de ligne car elle est mappée sur du code transpilé au lieu du code original (Aucune carte source provenant de chargeurs).

Mais vous pouvez toujours le faire en configurant manuellement la propriété devtool comme:

devtool: 'source-map'

qui va extraire les cartes source dans un fichier. Voici les types décrits de cartes source avec leurs coûts et avantages.

EDIT:

En fait, il y a est un problème sur github avec un PR associé à cela. Pour l'instant, le plug-in UglifyJS a défini sourceMap: false même en mode de production et il ne permet pas d'extraire les cartes source pour séparer les fichiers même avec devtool set.

21
Tomasz Mularczyk

La configuration la plus simple consiste à ajouter le devtool: 'sourcemaps' comme avant.

module.exports = {
  devtool: 'source-map',
  ...
};

Mais cela génère des cartes source à la fois pour le mode development ou production.

2
Csaba