Исходные карты потрясающие. Почему? Потому что они используются для отображения исходного кода JavaScript во время отладки, что намного проще для просмотра, чем минифицированный производственный код. В некотором смысле исходные карты - это кольцо декодера для вашего секретного (минифицированного) кода.
Используя Webpack, указание devtool: "source-map" в вашей конфигурации Webpack включит исходные карты, а Webpack выведет директиву sourceMappingURL в ваш окончательный минифицированный файл. Вы можете настроить само имя файла исходной карты, указав sourceMapFilename.
// webpack.config.js
module.exports = {
// ...
entry: {
"app": "src/app.js"
},
output: {
path: path.join(__dirname, 'dist'),
filename: "[name].js",
sourceMapFilename: "[name].js.map"
},
devtool: "source-map"
// ...
};А после бега получится что-то вроде
Hash: b59445cb2b9ae4cea11b
Version: webpack 4.1.1
Time: 1347ms
Built at: 3/16/2018 4:58:14 PM
Asset Size Chunks Chunk Names
main.js 838 bytes 0 [emitted] main
main.css 3.49 KiB 0 [emitted] main
main.js.map 3.75 KiB 0 [emitted] main
main.css.map 85 bytes 0 [emitted] main
index.html 220 bytes [emitted]
Entrypoint main = main.js main.css main.js.map main.css.map
...Может быть, у кого-то еще есть эта проблема в какой-то момент. Если вы используете UglifyJsPlugin в webpack, вам необходимо явно указать флаг sourceMap. Например:
new webpack.optimize.UglifyJsPlugin({ sourceMap: true })Devtool имеет разные варианты
__eval
eval генерирует код, в котором каждый модуль заключен в eval функцию:
__cheap-eval-source-map
cheap-eval-source-map идет дальше и включает версию кода в кодировке base64 в качестве URL-адреса данных. Результат содержит только строковые данные, но без сопоставления столбцов.
__cheap-module-eval-source-map
cheap-module-eval-source-map - та же идея, но с более высоким качеством и меньшей производительностью:
__eval-source-map
eval-source-map - это вариант самого высокого качества среди встроенных опций. Кроме того, он самый медленный, поскольку излучает больше всего данных.
__cheap-source-map
cheap-source-map аналогичен описанным выше дешевым вариантам. В результате будет пропущено сопоставление столбцов. Также не будут использоваться исходные карты из загрузчиков, таких как css-loader.
__cheap-module-source-map
cheap-module-source-map такой же, как и предыдущий, за исключением того, что исходные карты из загрузчиков упрощены до одного сопоставления на строку. В этом случае он дает следующий результат:
__hidden-source-map
hidden-source-map то же самое, что source-map, за исключением того, что он не записывает ссылки на исходные карты в исходные файлы. Если вы не хотите напрямую открывать исходные карты для инструментов разработки, в то время как вам нужны правильные трассировки стека, это удобно.
__nosources-source-map
nosources-source-map создает исходную карту без sourcesContent. Тем не менее, вы по-прежнему получаете трассировку стека. Опция полезна, если вы не хотите открывать исходный код клиенту.
__source-map
source-map обеспечивает наилучшее качество с полным результатом, но это также и самый медленный вариант.
Если вы используете его правильно, вы можете увидеть что-то подобное в inspect инструменте
Что вы можете использовать для отладки или, если хотите, подключить к своему рабочему месту.
Заключение
Исходные карты могут быть удобны во время разработки. Они предоставляют лучшие средства для отладки приложений, так как вы все еще можете исследовать исходный код, а не сгенерированный. Они могут быть полезны даже для производственного использования и позволяют отлаживать проблемы, обслуживая удобную для клиента версию вашего приложения.
Как видно из приведенной выше диаграммы, опубликованной на странице документации веб-пакета, я обычно использую eval для производственной среды и source-map для среды разработки.
