У меня есть приложение 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)?





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