Как отлаживать код ES6, распространяемый по нескольким JS-файлам? [Дубликат]

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

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

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

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

devtool best dev options

                                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 rebuild time ~ 3.5 s ... inline-source-map rebuild time ~ 7s

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

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

и в загрузчиках я сохранил загрузчик babel в качестве первого параметра

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

Вы можете попробовать Dawn, это проще

https://github.com/alibaba/dawn

пример:

Установить

npm i dawn -g

Добавить файл .dawn.yml в ваш проект

build:
  - name: webpack
    output: ./dist
    entry: ./src/*.js
    template: ./assets/*.html
    sourceMap: true

Выполнить следующую команду

dn build

Вы можете завершить сборку

Минимальная конфигурация 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 + production, вы можете попробовать что-то подобное в вашей конфигурации:

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

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

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

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