Webpack, как определить каждое имя исходного файла

Question

webpack фактический вывод один файл bundle.js, но разработчик может видеть исходные имена файлов в консоли Chrome, как это работает?

Исходный код:

a.js

import './b.js'
console.log('hello from a.js')

b.js

console.log('hello from b.js')

В консоли Chrome:

Какой API может отображать имя исходного файла

Answer 1

Спасибо @Luke, помогите мне найти sourceURL: https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps#sourceurl_displayname

В bundle.js я нашел

eval("console.log('hello from b.js')\n\n\n//# sourceURL=webpack:///./b.js?");

Последний комментарий //# sourceURL= указывает имя исходного файла.

Answer 2

Webpack фактически выводит второй файл при сборке в режиме разработки.Это файл исходной карты, который позволяет браузеру узнать, где найти правильные исходные файлы.В вашем случае это, вероятно, называется bundle.js.map.

. На производстве люди обычно не публикуют файл исходной карты.

Для более подробной информации о том, как это работает, есть много статей в Интернете, вот несколько:

https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ http://blog.teamtreehouse.com/introduction-source-maps

Вот как сделать исходные карты вВеб-пакет:

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