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

Я новичок в Webpack, и мне нужна помощь в настройке для создания исходных карт. Я бегу webpack serveиз командной строки, которая успешно компилируется. Но мне действительно нужны исходные карты. Это мое 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()
  ]

};

Я действительно новичок в вебпаке, и смотрю, хотя документы действительно не помогли, так как я не уверен, к чему относится эта проблема.

Для того , чтобы карта источника использования, вы должны изменить devtoolпараметр значение от trueдо значения , которое доступно в this list, например ,source-map

devtool: 'source-map'

devtool: 'source-map'- SourceMap испускается.

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

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

Минимальная конфигурация webpack для 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$

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

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

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

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

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

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

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

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 с ... время перестроения inline-source-map составляет ~ 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' }
]