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

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.

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.

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 })

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$

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

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

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' }
]