it-swarm.com.de

Der Webpack-dev-Server generiert keine Quellkarten

Ich verwende babel-loader , kann aber nicht herausfinden, wie Quellkarten für transpiled-Dateien generiert werden. Ich habe versucht 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"
    }
}

bearbeiten:// 

Nach all dem funktioniert webpack.config.js und dieses package.json für mich.

edit2: //

Jetzt verwende ich diese Webpack-Konfiguration

44
Matt

Verwenden Sie webpack -d

Das Flag d steht für Entwicklungsverknüpfung und ermöglicht alle Ihre Entwicklertools, z. B. Quellkarten.

27
FaureHu

Verwendung webpack-dev-server -d

  • -d ist eine Abkürzung für --debug --devtool source-map --output-pathinfo.
  • output-pathinfo fügt dem generierten Bundle Kommentare hinzu, die erklären, welche Module/Dateien an welchen Stellen enthalten sind. Im generierten Code wird der Kommentar zu dieser Codezeile hinzugefügt: require(/* ./test */23), die besagt, dass 23 auf das Modul test zeigt. Dies ist meistens hilfreich, wenn Sie den von Webpack generierten Code betrachten und nicht so viel, wenn Sie durch den Debugger gehen. Ich habe dieses Beispiel aus diesem relevanten Dokumentationsabschnitt erhalten.

  • Dies funktioniert alles, weil webpack-dev-server alle gleichen Flags wie webpack akzeptiert.

  • Siehe diesen Abschnitt in den Dokumenten für Details.

Tipps & Tricks

  • --content-base - Standardmäßig stellt der Dev-Server Dateien in dem Verzeichnis bereit, in dem Sie den Befehl ausführen. Wenn sich Ihre Build-Dateien in build/ befinden, müssen Sie --content-base build/ angeben, damit der Dev-Server Dateien im Verzeichnis build bereitstellt
  • --inline - automatisch neu laden, wenn Sie eine Datei mit einigen Änderungen speichern!
37
Titus

Fügen Sie {devtool:"source-map"} zu Ihrer webpack.config.js hinzu.

Mehr hier

4
柴必青

Bitte fügen Sie in Ihrer webpack.config.js-Datei Folgendes ein:

devtool: "# inline-source-map",

Weitere Informationen dazu finden Sie auf der Website von webpack` https://webpack.github.io/docs/configuration.html

Im Anhang finden Sie auch einen Screenshot des Sourcemap-Teils von der Webpack-Site.

enter image description here

1

Alles was ich getan habe ist Veränderung:

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

Äquivalent zu: $ webpack-dev-server -d

Jetzt kann ich Ctrl + p in Chrome verwenden und sehe meine ES6-Syntax, um Haltepunkte festzulegen.

Info

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