Как сгенерировать исходные карты при использовании babel и webpack?

Может быть, у кого-то еще есть эта проблема в какой-то момент. Если вы используете UglifyJsPlugin в webpack 2, вам необходимо явно указать флаг sourceMap. Например:

new webpack.optimize.UglifyJsPlugin({ sourceMap: true })

Минимальная конфигурация веб-пакета для jsx с исходными картами:

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

Запускаем это:

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$

При оптимизации для разработки и производства вы можете попробовать что-то вроде этого в своей конфигурации:

const dev = process.env.NODE_ENV !== 'production'

// in config

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

Из документов:

• devtool: eval-cheap-module-source-map предлагает SourceMaps, который отображает только линии (без сопоставления столбцов) и работает намного быстрее
• devtool: source-map не может кэшировать SourceMap для модулей, и ему необходимо заново создать полную SourceMap для блока. Это что-то для продакшена.

Я использую webpack 2.1.0-beta.19

На Webpack 2 я перепробовал все 12 вариантов разработчика. Следующие параметры ссылаются на исходный файл в консоли и сохраняют номера строк. См. Примечание ниже, касающееся только строк.

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

Лучшие варианты разработчика для разработчика

                                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

только строки

Исходные карты упрощены до одного сопоставления на строку. Обычно это означает одно отображение для каждого оператора (при условии, что вы автор такой). Это предотвращает отладку выполнения на уровне оператора и установку точек останова в столбцах строки. Комбинирование с минимизацией невозможно, поскольку минимизаторы обычно выделяют только одну строку.

ПЕРЕСМОТРЕТЬ ЭТО

В большом проекте я нахожу ... время перестройки eval-source-map составляет ~ 3,5 с ... время перестройки встроенной исходной карты составляет ~ 7 с

Даже с той же проблемой, с которой я столкнулся, в браузере отображался скомпилированный код. Я внес следующие изменения в конфигурационный файл webpack, и теперь он работает нормально.

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

а в загрузчиках я оставил babel-loader как первый вариант

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