Webpack source map для удобной отладки

Сегодня на операционном столе сайт с интерфейсом администратора. Причина заболевания: переезд с gulp на webpack.
Первая проблема: удобный source map.
Поехали 😉

Webpack формирует один файлик, например, bundle.js — в котором весь наш js-код. Следовательно, при возникновении ошибки, получаем такую информацию:

Грохнулись на 1691й строчке в файле bundle.js — не очень информативно. Мы можем зайти в файл bundle.js, увидеть там подстроку (хорошо, если она еще не минифицирована) и найти поиском по проекту эту строку в нужном файле скрипта, но гораздо удобнее использовать source-maps (как это мы уже делали при помощи gulp+browserify)

Включить source-map в webpack легко. Он поддерживается из коробки, достаточно добавить в webpack.config настройку

devtool: 'eval'

Итог:

Мы знаем, что упали на 10й строке из файла controllers/balance.js

Удобно! Быстрого поиска вам, господа)

P.S. на всякий случай прикладываю файл настройки webpack для сборки (без минификации) всех скриптов + source.map

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

var PATHS = {
  app: __dirname + '/src/js/',
  prod: __dirname + '/build/js'
};

module.exports = {
  devtool: 'eval',
  context: PATHS.app,
   entry: {
    app: './main.js'
  },
  output: {
    path: PATHS.prod,
    filename: 'bundle.js'
  }
}
comments powered by HyperComments
Furrya Black
2017-02-14 03:26:55
я использую такую болванку чисто для js - webpack+testem.js: https://github.com/furryablack/Doodle там же основанный на этой болванке пример https://github.com/furryablack/Utils Пишем на ES6. babel транспайлерит в ES5, testem.js для TDD тестов + yield'ы, async/await'ы
Furrya Black
2017-02-14 03:29:50
Причем ничего не мешает нарастить болванку до full fronted app
При копировании материалов обратная ссылка на play-stop.ru желательна обязательна!