web-dev-qa-db-fra.com

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

J'utilise babel-loader , mais je ne vois pas comment générer ni où trouver les cartes source des 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",
        "flux": "^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, webpack.config.js et ceci package.json fonctionnent pour moi.

edit2: //

Maintenant, j'utilise cette configuration webpack

webpackwebpack-dev-server
44
Matt

Utilisez webpack -d

L'indicateur d représente un raccourci de développement et active tous vos outils de développement, tels que les cartes source.

27
FaureHu

Utiliser webpack-dev-server -d

  • -d est un raccourci pour --debug --devtool source-map --output-pathinfo.

  • output-pathinfo ajoute à l'ensemble généré des commentaires expliquant quels modules/fichiers sont inclus à quels endroits. Donc, dans le code généré, le commentaire est ajouté à cette ligne de code: require(/* ./test */23) qui dit que 23 pointe vers le module test. Cela est surtout utile lorsque vous consultez le code généré par Webpack et moins lorsque vous parcourez le débogueur. J'ai eu cet exemple de ce morceau de documentation pertinent .

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

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

Trucs et astuces

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

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

Voir plus ici

4
柴必青

S'il vous plaît ajouter dans votre fichier webpack.config.js le suivant

devtool: "# inline-source-map",

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

Veuillez également trouver ci-joint une copie d’écran de la partie sourcemap, provenant du site Webpack.

enter image description here

1
Kostya Harutyunyan

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

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

Équivalent à: $ webpack-dev-server -d

Maintenant, je peux utiliser Ctrl + p dans Chrome et je vois 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
0
Cody