Wie generiere ich Sourcemaps, wenn ich Babel und Webpack verwende?

328

Ich bin neu im Webpack und brauche eine Hand beim Einrichten, um Quellkarten zu generieren. Ich laufe webpack servevon der Kommandozeile aus, die erfolgreich kompiliert wird. Aber ich brauche wirklich Sourcemaps. Das ist mein webpack.config.js.

var webpack = require('webpack');

module.exports = {

  output: {
    filename: 'main.js',
    publicPath: '/assets/'
  },

  cache: true,
  debug: true,
  devtool: true,
  entry: [
      'webpack/hot/only-dev-server',
      './src/components/main.js'
  ],

  stats: {
    colors: true,
    reasons: true
  },

  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
      'styles': __dirname + '/src/styles',
      'mixins': __dirname + '/src/mixins',
      'components': __dirname + '/src/components/',
      'stores': __dirname + '/src/stores/',
      'actions': __dirname + '/src/actions/'
    }
  },
  module: {
    preLoaders: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'jsxhint'
    }],
    loaders: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel-loader'
    }, {
      test: /\.sass/,
      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
    }, {
      test: /\.scss/,
      loader: 'style-loader!css!sass'
    }, {
      test: /\.(png|jpg|woff|woff2)$/,
      loader: 'url-loader?limit=8192'
    }]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]

};

Ich bin wirklich neu im Webpack und es hat nicht wirklich geholfen, die Dokumente zu lesen, da ich nicht sicher bin, wofür dieses Problem spezifisch ist.

Rollo
quelle
Zu The 'debug' property was removed in webpack 2.
Ihrer Information

Antworten:

435

Zur Verwendung Quelle Karte, sollten Sie ändern devtoolOption Wert aus trueauf den Wert , die in this listzum Beispielsource-map

devtool: 'source-map'

devtool: 'source-map'- Eine SourceMap wird ausgegeben.

Alexander T.
quelle
12
Die denugEigenschaft wurde in Webpack 2 entfernt.
jnns
@jnns Was hat es ersetzt?
Brad
6
Ich kann bestätigen (Webpack 3.5): devtoolist genug. Kein Debug-Wert erforderlich.
Frank Nocke
Ich möchte nur hinzufügen, dass Sie, wenn Sie React verwenden, die spezifische Konfiguration dafür finden sollten (create-react-app).
Morgengrauen
Wohin wird die Datei tatsächlich ausgegeben?
Melbourne Developer
107

Vielleicht hat jemand anderes dieses Problem an einem Punkt. Wenn Sie das UglifyJsPluginin verwenden webpack 2, müssen Sie das sourceMapFlag explizit angeben . Zum Beispiel:

new webpack.optimize.UglifyJsPlugin({ sourceMap: true })
Alex Moldovan
quelle
9
Ich musste auch einschließen, devtool: 'source-map'damit es funktioniert
Vic
1
Ich musste dies in die CSS- und Sass Loader-Optionen aufnehmen.
d_rail
33

Minimale Webpack-Konfiguration für jsx mit Quellkarten:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: `./src/index.jsx` ,
  output: {
    path:  path.resolve(__dirname,"build"),
    filename: "bundle.js"
  },
  devtool: 'eval-source-map',
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

Ausführen:

Jozsefs-MBP:react-webpack-babel joco$ webpack -d
Hash: c75d5fb365018ed3786b
Version: webpack 1.13.2
Time: 3826ms
        Asset     Size  Chunks             Chunk Names
    bundle.js   1.5 MB       0  [emitted]  main
bundle.js.map  1.72 MB       0  [emitted]  main
    + 221 hidden modules
Jozsefs-MBP:react-webpack-babel joco$
jhegedus
quelle
15

Wenn Sie für dev + product optimieren , können Sie in Ihrer Konfiguration Folgendes ausprobieren:

{
  devtool: dev ? 'eval-cheap-module-source-map' : 'source-map',
}

Aus den Dokumenten:

  • devtool: "eval-cheap-module-source-map" bietet SourceMaps, die nur Linien (keine Spaltenzuordnungen) zuordnen und viel schneller sind
  • devtool: "source-map" kann SourceMaps für Module nicht zwischenspeichern und muss die vollständige SourceMap für den Chunk neu generieren. Es ist etwas für die Produktion.

Ich verwende Webpack 2.1.0-beta.19

lfender6445
quelle
2
Die aktuelle, ziemlich genaue Liste für Build + Rebuild-Leistung finden Sie hier in den offiziellen Dokumenten
Frank Nocke,
Wo / wie wird die devVariable gesetzt?
Chris
In typischen Fällen werden möglicherweise .envdefinierte Dateien oder Mutationen angezeigt process.env. Dies ist nur ein Beispiel, aber es könnte so aussehen:const dev = process.env.development === true
lfender6445
6

Auf Webpack 2 habe ich alle 12 devtool-Optionen ausprobiert. Die folgenden Optionen verknüpfen die Originaldatei in der Konsole und behalten die Zeilennummern bei. Siehe den Hinweis unten nur zu Zeilen.

https://webpack.js.org/configuration/devtool

devtool beste dev Optionen

                                build   rebuild      quality                       look
eval-source-map                 slow    pretty fast  original source               worst
inline-source-map               slow    slow         original source               medium
cheap-module-eval-source-map    medium  fast         original source (lines only)  worst
inline-cheap-module-source-map  medium  pretty slow  original source (lines only)  best

nur Zeilen

Quellzuordnungen werden auf eine einzelne Zuordnung pro Zeile vereinfacht. Dies bedeutet normalerweise eine einzelne Zuordnung pro Anweisung (vorausgesetzt, Ihr Autor ist dies). Dies verhindert, dass Sie die Ausführung auf Anweisungsebene debuggen und Haltepunkte für Spalten einer Zeile festlegen. Eine Kombination mit Minimierung ist nicht möglich, da Minimierer normalerweise nur eine einzige Zeile ausgeben.

ÜBERARBEITUNG DIESES

Bei einem großen Projekt finde ich ... die Wiederherstellungszeit für die Eval-Source-Map beträgt ~ 3,5 Sekunden ... Die Wiederherstellungszeit für die Inline-Source-Map beträgt ~ 7 Sekunden

danday74
quelle
3

Sogar das gleiche Problem, mit dem ich konfrontiert war, zeigte im Browser kompilierten Code an. Ich habe unten Änderungen in der Webpack-Konfigurationsdatei vorgenommen und es funktioniert jetzt einwandfrei.

 devtool: '#inline-source-map',
 debug: true,

und bei ladern habe ich babel-loader als erste option behalten

loaders: [
  {
    loader: "babel-loader",
    include: [path.resolve(__dirname, "src")]
  },
  { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' },
  { test: /\.html$/, loader: 'raw' },
  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: [
      'file?hash=sha512&digest=hex&name=[hash].[ext]',
      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
  },
  {test: /\.less$/, loader: "style!css!less"},
  { test: /\.styl$/, loader: 'style!css!stylus' },
  { test: /\.css$/, loader: 'style!css' }
]
Dijo
quelle
6
Die debugEigenschaft wurde in Webpack 2 entfernt.
jnns
+1. Das Hinzufügen der includeOption hat es für mich behoben. In Webpack 2 sieht es so aus:rules: [{loader: 'babel-loader', include: [path.resolve(__dirname, "src")]
Matt Browne