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