Генерация исходной карты webpack

У меня есть приложение React, которое использует веб-пакет, и я хотел бы настроить его для создания исходных карт для отладки через браузер.

Я добавил devtool: 'eval-source-map' к своему webpack.config.js. Насколько я понимаю, номера строк из транспилированного кода должны быть сопоставлены с моими исходными файлами для отладки.

Я запускаю свой скрипт развивать (npm запустить разработку) для запуска webpack. Но когда я открываю Chrome DevTools и раскрываю исходный код в разделе веб-пакет-внутренний://, код не соответствует моему исходному коду, а вместо этого показывает преобразованный формат (например, «функция _typeof (obj)» и т. д.).

Разве это не должно позволить мне отлаживать мой исходный код (пре-бабелевскую транспиляцию) с помощью Chrome DevTools и т. д.?

Мой сценарий развивать в пакет.json:

"develop": "webpack --mode development --watch",

Мой webpack.config.js:

const path = require('path')

module.exports = {
    entry: './src/index.jsx',
    output: {
        filename: 'bundle.js',
        path: "C:\\dev\\apache-tomcat-9.0.8\\webapps\\myapp"
    },
    devtool: 'eval-source-map',
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ['@babel/react', '@babel/preset-env'],
                        plugins: ['@babel/proposal-class-properties']
                    }
                },
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader'
                }]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader'
                    }
                ]
            }
        ]
    }
};

Обновлять: Оказывается, это работает для меня в Firefox (я вижу исходный код во время отладки), но не в Chrome. Как я могу заставить его работать в Chrome (через Chrome DevTools)?

Оказывается, это работает в Firefox (я вижу исходный код во время отладки), но НЕ в Chrome. Как я могу заставить его работать в Chrome?

Woodchuck 02.08.2019 00:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
1
477
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Откройте Chrome DevTools, затем выберите «Настройки» и установите флажок Включить исходные карты JavaScript.

Другие вопросы по теме