PiCoderman
@PiCoderman
Design | Web | React | NodeJS | Linux

Как заставить webpack делать source maps для lazy loading компонентов React?

Если все компоненты приложения просто подключены к одному index.js, который является entry, а также в конфиге webpack devtool: "source-map", то в консоли разработчика в Sources можно увидеть следующее:

photo1

5d29f004ba92e127849184.png


Но если подключать компоненты через React.lazy и Suspense, то карт для подключенных таким образом файлов просто нет.
В таком случае можно отключить создание карт webpack'ом, и добавить в options для babel параметр sourceMaps, который может принимать значения: true/false, "inline", "both", но все эти значения создают карты только в примерно таком виде:

photo2

5d29f1fc5474b836115348.png


Соответственно проблема. Нужно либо как то заставить webpack делать карты для всех .js файлов, даже тех, которые на прямую не подключаются где-то через entry скрипт, а являются lazy загружаемыми, либо нужно, чтобы babel делал такие же карты как и webpack.
Как такое можно сделать?

config

const path = require('path')

module.exports = {
  entry : './src/index.js',
  output : {
    filename : 'main.js',
    sourceMapFilename : 'main.map',
    path : path.resolve(__dirname, 'dist')
  },
  watch : true,
  mode : 'development',
  devtool: 'source-map',
  module : {
    rules : [
      {
        test : /\.js$/,
        exclude : /(node_modules)/,
        loader : 'babel-loader',
        options: {
          presets: [ '@babel/preset-react' ],
          plugins: [ '@babel/plugin-syntax-dynamic-import' ],
          // sourceMaps: true,
        },
      }
    ]
  }
}

  • Вопрос задан
  • 54 просмотра
Решения вопроса 1
PiCoderman
@PiCoderman Автор вопроса
Design | Web | React | NodeJS | Linux
В output.sourceMapFilename не нужно ничего указывать. Тогда будут карты для всех скриптов
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
miraage
@miraage
Lead Software Engineer
Проблему так не подскажу, но могу предложить подсмотреть конфиг в CRA.
devtoolModuleFilenameTemplate какой-нибудь потюнить
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Level8 Москва
от 180 000 до 220 000 руб.
Potok Москва
До 200 000 руб.
OnederX Москва
от 100 000 до 160 000 руб.