Генерация sourcemaps в Webpack и Babel: полная инструкция
Быстрый ответ
Для того чтобы создать карты исходников в Webpack, укажите параметр devtool: 'source-map'
. В конфигурационных файлах babel-loader
применяйте sourceMaps: true
. Ниже приведен образец конфигураций:
module.exports = {
devtool: 'source-map', // Здесь задаем создание карт 🗺️
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: { sourceMaps: true } // Командуем Babel создавать карты ⚒️
}
}]
}
};
Затем запустите Webpack для того, чтобы он создал файлы .map
для ваших JavaScript-сборок.
Типы devtool: разработка против продакшена
Среда разработки:
- используйте
eval-cheap-module-source-map
для быстрой пересборки. - Это обеспечит максимальную скорость отладки.
Среда продакшна:
- выберите
devtool: 'source-map'
для полных карт исходников. - Это позволит минимизировать карты, что сократит размер сборок и скрыть исходный код.
Карты исходников и Babel-loader
Исключение node_modules:
- Увеличьте скорость сборки, исключив
node_modules
. Babel будет благодарен! ☕
{
test: /\.js$/,
exclude: /node_modules/, // Доступ в node_modules закрыт! 🧙
use: {
loader: 'babel-loader',
options: { sourceMaps: true }
}
}
Баланс между скоростью пересборки и точностью карт исходников
- Варианты
devtool
оказывают влияние на скорость пересборки и точность карт исходников. - Найдите гармонию между этими аспектами на основе размеров и сложности вашего проекта.
Конфигурация UglifyJsPlugin
- Если вы работаете с версией Webpack 2 или выше, не забывайте активировать
sourceMap
в UglifyJsPlugin. - Поиск сокровищ всегда привлекает всех! 🎁
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new UglifyJsPlugin({ sourceMap: true })], // Uglify, настрой карты!
},
// ...
}
Настройка для конкретной среды:
- Применяйте
process.env.NODE_ENV
, чтобы настроить генерацию карт исходников для разработки или продакшена.
module.exports = {
devtool: process.env.NODE_ENV === 'development' ? 'eval-source-map' : 'source-map', // Условное картографирование! Очень удобно!
// ...
};
Отладка и трассировка ошибок при помощи карт исходников
Sourcemaps – опора нашего кода!:
- Для эффективной отладки в процессе разработки лучше применять
eval-source-map
. - Это позволяет соблюсти баланс между качеством карт и скоростью сборки.
Точное отслеживание ошибок:
- Для качественного трекинга ошибок важна грамотная работа карт исходников.
- Системы отчетности об ошибках, такие как Sentry, требуют точных карт.
Визуализация
Babel преобразует современный код (ES6+) в код JavaScript, понятный браузерам, а Webpack упаковывает и доставляет его. Для того чтобы анализировать исходный код среди всех этих манипуляций, вам понадобится карта исходников.
Ткать (🧶) = Писать код на ES6+
Babel (🎨) = Преобразователь, который адаптирует новые возможности для старых браузеров
Webpack (🖼️) = Организует показ и доставку результатов
Пришло время задействовать карты исходников!
// webpack.config.js
module.exports = {
// ...
devtool: 'source-map', // 🗺️ Пришло время раскрыть все карты!
// ...
};
Теперь мы можем использовать карту исходников в роли навигатора, сопоставляя финальный продукт с оригинальным кодом.
Продвинутые карты исходников
В масштабных проектах важно учесть производительность:
- Анализируйте, как карты исходников влияют на производительность сборки.
- Находите самый оптимальный баланс между возможностями отладки и производительностью.
- Проводите тесты и корректируйте подход.
Конфиденциальность исходного кода:
- В продакшене карты исходников могут раскрыть ваш исходный код.
- Для сохранения конфиденциальности размещайте карты на закрытом сервере или удаляйте их после деплоя.
Автоматизация в CI/CD:
- Интегрируйте генерацию карт исходников в процесс непрерывной интеграции и непрерывной доставки.
Полнота контроля:
- Если вам необходим полный контроль над созданием карт, SourceMapDevToolPlugin будет весьма полезен.
Полезные материалы
- Devtool | webpack — официальные рекомендации по настройке карт исходников в webpack.
- Options · Babel — руководство Babel по работе с картами исходников.
- Source Maps don't work on Chrome · Issue #2145 · webpack/webpack · GitHub — обсуждение проблем с картами исходников сообществом разработчиков webpack.
- Understanding webpack from the inside out – YouTube — детальное описание работы webpack, включая карты исходников, в видеоформате.
- SourceMapDevToolPlugin | webpack — сведения о плагине SourceMapDevToolPlugin от webpack.
- Source Maps — гайд по применению карт исходников с использованием webpack и Babel на SurviveJS.