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,
        },
      }
    ]
  }
}

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

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

Войти через центр авторизации
Похожие вопросы