Ответ 1
Вы можете использовать исходные карты, чтобы сохранить сопоставление между исходным кодом и связанным/уменьшенным.
Webpack предоставляет опцию devtool для улучшения отладки в инструменте разработчика, просто создавая для вас исходную карту связанного файла. Эта опция может использоваться из командной строки или использоваться в файле конфигурации webpack.config.js.
Ниже вы можете найти надуманный пример, используя командную строку для создания связанного файла (bundle.js) вместе с созданным файлом исходной карты (bundle.js.map).
$ webpack --devtool source-map ./entry.js bundle.js
Hash: b13b8d9e3292806f8563
Version: webpack 1.12.2
Time: 90ms
Asset Size Chunks Chunk Names
bundle.js 1.74 kB 0 [emitted] main
bundle.js.map 1.89 kB 0 [emitted] main
[0] ./entry.js 85 bytes {0} [built]
[1] ./hello.js 59 bytes {0} [built]
index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
entry.js
var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();
hello.js
module.exports = function () {
return 'Hello world!';
};
Если вы открываете index.html в своем браузере (я использую Chrome, но я думаю, что он также поддерживается в других браузерах), вы увидите на вкладке "Источники", что у вас есть связанный файл по схеме file://и исходные файлы по специальной схеме webpack://.
И да, вы можете начать отладку, как если бы у вас был исходный код! Попробуйте поставить точку останова в одну строку и обновить страницу.
