Webpack-dev-server ne génère pas de cartes source

J’utilise babel-loader , mais je n’arrive pas à comprendre comment générer ou trouver des cartes source pour les fichiers transpilés. J’ai essayé eval-source-map , inline-source-map , source-map .

webpack.config.js

 const BowerWebpackPlugin = require("bower-webpack-plugin"); module.exports = { entry: './src/script/index.jsx', output: { filename: 'bundle.js', sourceMapFilename: "bundle.js.map", publicPath: 'http://localhost:8090/assets' }, debug: true, devtool: 'inline-source-map', module: { loaders: [ { test: /\.js[x]?$/, loaders: ['react-hot', 'jsx', 'babel'], exclude: /node_modules/ }, { test: /\.scss$/, loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ] }, { test: /\.less$/, loaders: [ 'style', 'css?sourceMap', 'less?sourceMap' ] }, { test: /\.css$/, loaders: [ 'style', 'css'] }, { test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.woff2$/, loader: "url-loader?limit=10000&mimetype=application/font-woff2" }, { test: /\.(eot|ttf|svg|gif|png)$/, loader: "file-loader" } ] }, plugins: [ new BowerWebpackPlugin() ], externals: { //don't bundle the 'react' npm package with our bundle.js //but get it from a global 'React' variable 'react': 'React' }, resolve: { extensions: ['', '.js', '.jsx'] } } 

package.json

  { "name": "Won", "version": "0.0.1", "description": "Internal evidence application", "main": "index.jsx", "scripts": { "start": "npm run serve | npm run dev", "serve": "./node_modules/.bin/http-server -p 8080", "dev": "webpack-dev-server -d --progress --colors --port 8090" }, "author": "And", "license": "ISC", "devDependencies": { "babel-core": "^5.8.23", "babel-loader": "^5.3.2", "bootstrap": "^3.3.5", "bootstrap-select": "^1.7.3", "bootstrap-table": "^1.8.1", "bower-webpack-plugin": "^0.1.8", "colresizable": "^1.5.2", "css-loader": "^0.16.0", "events": "^1.0.2", "extract-text-webpack-plugin": "^0.8.2", "file-loader": "^0.8.4", "stream": "^2.1.1", "http-server": "^0.8.0", "jquery": "^2.1.4", "jquery-ui": "^1.10.5", "json-markup": "^0.1.6", "jsx-loader": "^0.13.2", "less": "^2.5.1", "less-loader": "^2.2.0", "lodash": "^3.10.1", "node-sass": "^3.2.0", "object-assign": "^4.0.1", "path": "^0.11.14", "react": "^0.13.3", "react-hot-loader": "^1.2.9", "sass-loader": "^2.0.1", "style-loader": "^0.12.3", "svg-sprite-loader": "0.0.2", "url-loader": "^0.5.6", "webpack": "^1.12.0", "webpack-dev-server": "^1.10.1" } } 

modifier://

Après tout cela, webpack.config.js et ce package.json fonctionnent pour moi.

edit2: //

J’utilise maintenant cette config

Utilisez webpack -d

Le drapeau d représente le raccourci de développement et active tous vos outils de développement, tels que les cartes source.

Utilisez webpack-dev-server -d

  • -d est l’abréviation de --debug --devtool source-map --output-pathinfo .
  • output-pathinfo ajoute des commentaires au bundle généré qui expliquent quels modules / fichiers sont inclus dans quels endroits. Donc, dans le code généré, le commentaire est ajouté à cette ligne de code: require(/* ./test */23) qui indique que 23 pointe vers le module de test . Cela est surtout utile lorsque vous regardez le code généré par Webpack, et pas tellement lorsque vous parcourez le débogueur. J’ai pris cet exemple à partir de cette documentation pertinente .

  • Tout cela fonctionne car webpack-dev-server accepte tous les mêmes indicateurs que webpack .

  • Voir cette section dans docs pour plus de détails.

Conseils et astuces

  • --content-base – par défaut, le serveur dev servira les fichiers dans le répertoire dans --content-base vous exécutez la commande. Si vos fichiers de construction sont dans build/ , vous devez spécifier --content-base build/ afin que le serveur de développement serve fichiers dans le répertoire de build
  • --inline – recharge automatique chaque fois que vous enregistrez un fichier avec quelques modifications!

Ajoutez {devtool:"source-map"} à votre webpack.config.js

Voir plus ici

S’il vous plaît append dans votre fichier webpack.config.js la suivante`

devtool: “# inline-source-map”,

Vous pouvez trouver des informations claires à ce sujet depuis le site de webpack` https://webpack.github.io/docs/configuration.html

Veuillez également trouver une capture d’écran de la partie sourcemap du site Webpack.

entrer la description de l'image ici

Tout ce que j’ai fait c’est changer:

 // package.json { ... **from** "dev:serve": "webpack-dev-server", **to** "dev:serve": "webpack-dev-server -d", ... } 

Equivalent à: $ webpack-dev-server -d

Je peux maintenant utiliser Ctrl + p dans Chrome et voir ma syntaxe ES6 pour définir des points d’arrêt.

Info

 $ webpack-dev-server --version webpack-dev-server 2.9.7 webpack 3.10.0