我在尝试调试 SSR React 应用程序(服务器端)时花费了太多时间。我们正在从头开始构建一个应用程序,这是一个非常大的项目,因此调试代码非常重要。
服务器的 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 中,我得到了著名的:
未验证的断点,已设置断点但尚未绑定
我正在使用 node --inspect 标志运行生成的 server.js 文件(与 webpack 捆绑后):
我尝试了很多 launch.json 配置,例如:
{
"name": "Attach to Process",
"type": "node",
"protocol": "inspector",
"request": "attach",
"port": 9229,
"sourceMaps": true
}
在 Chrome 中,如果我打开 Chrome 的开发工具,我可以看到源映射并设置断点,但它们永远不会被命中。
如果你们能帮我解决这个问题,我将非常感激。任何见解或想法也将受到赞赏。
Thanks.