Я потерял слишком много часов, пытаясь отладить приложение реакции SSR (на стороне сервера). Мы создаем приложение с нуля, и это очень большой проект, поэтому отладка кода действительно важна.
Конфигурация webpack для сервера следующая:
const path = require('path');
const merge = require('webpack-merge');
const webpackNodeExternals = require('webpack-node-externals');
const webpack = require('webpack');
const baseConfig = require('./app.webpack.base');
const server = {
name: 'server',
entry: ['./app/server/index.js'],
target: 'node',
mode: 'development',
devtool: 'source-map',
output: {
path: path.resolve(__dirname, 'public/server'),
filename: 'server.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: 'file-loader',
exclude: /node_modules/,
options: {
name: 'public/media/[name].[ext]',
publicPath: (url) => url.replace(/public/, ''),
emit: false
}
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
{
loader: 'css-loader/locals'
},
{
loader: 'sass-loader'
}
]
}
]
},
plugins: [
new webpack.DefinePlugin({
'SERVER_SIDE': true,
'ENVIRONMENT': JSON.stringify(process.env.NODE_ENV),
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
],
externals: [webpackNodeExternals()]
};
module.exports = merge(baseConfig, server);
BaseConfig добавляет загрузчик только для файлов js и jsx:
module: {
rules: [
{
test: [/js$/, /\.jsx?$/],
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
Я не могу отладить его ни в VSCode, ни в Chrome.
В VSCode я получаю известное:
Unverified breakpoint, Breakpoints set but not yet bound
Я запускаю сгенерированный файл server.js (после пакета с веб-пакетом) с флагом node --inspect:
Я пробовал много конфигураций launch.json, например:
{
"name": "Attach to Process",
"type": "node",
"protocol": "inspector",
"request": "attach",
"port": 9229,
"sourceMaps": true
}
А в Chrome, если я открою DevTools для Chrome, я смогу увидеть исходные карты и установить точки останова, но они никогда не сработают.
Я буду очень благодарен вам, ребята, если вы мне поможете. Также приветствуются любые идеи или идеи.
Спасибо.





У меня введите описание ссылки здесь