
Сегодня на операционном столе сайт с интерфейсом администратора. Причина заболевания: переезд с 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