Генерация 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 будет весьма полезен.

Полезные материалы

1. Devtool | webpack — официальные рекомендации по настройке карт исходников в webpack.
2. Options · Babel — руководство Babel по работе с картами исходников.
3. Source Maps don't work on Chrome · Issue #2145 · webpack/webpack · GitHub — обсуждение проблем с картами исходников сообществом разработчиков webpack.
4. Understanding webpack from the inside out – YouTube — детальное описание работы webpack, включая карты исходников, в видеоформате.
5. SourceMapDevToolPlugin | webpack — сведения о плагине SourceMapDevToolPlugin от webpack.
6. Source Maps — гайд по применению карт исходников с использованием webpack и Babel на SurviveJS.