Using vscode debugger with webpack and node.js - node.js

Question

Currently I'm working on a backend application using express + node.js and webpack as the bundler.
So far, I was able to run and test my code without any problem.
I would like now to use the Visual Studio Code debugger in order to debug my application. I tried to follow along this tutorial https://medium.com/#jsilvax/debugging-webpack-with-vs-code-b14694db4f8e
Now, when I try to launch my debugger, it just prints to the console Webpack is watching the files… without actually run my server
Here is my launch.json file:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Webpack",
"program": "${workspaceFolder}/node_modules/webpack/bin/webpack.js",
"args": [
"--config", "./webpack.config.js"
],
}
]
}
And here is my webpack.config.js file:
const webpack = require('webpack')
const path = require('path')
const nodeExternals = require('webpack-node-externals')
const StartServerPlugin = require('start-server-webpack-plugin')
module.exports = {
entry: ['webpack/hot/poll?1000', './src/index'],
watch: true,
devtool: 'sourcemap',
target: 'node',
node: {
__filename: true,
__dirname: true
},
externals: [nodeExternals({ whitelist: ['webpack/hot/poll?1000'] })],
module: {
rules: [
{
test: /\.js?$/,
use: [
{
loader: 'babel-loader',
options: {
babelrc: false,
presets: [['env', { modules: false }], 'stage-0'],
plugins: ['transform-regenerator', 'transform-runtime']
}
}
],
exclude: /node_modules/
},
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
use: {
loader: 'raw-loader'
}
}
]
},
plugins: [
new StartServerPlugin('server.js'),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.DefinePlugin({
'process.env': { BUILD_TARGET: JSON.stringify('server') }
}),
new webpack.SourceMapDevToolPlugin({
filename: '[name].js.map'
}),
new webpack.BannerPlugin({ banner: 'require("source-map-support").install();', raw: true, entryOnly: false })
],
output: { path: path.join(__dirname, 'dist'), filename: 'server.js' }
};
Also, this is my project structure:
To run this application without using the debugger, I have a start script which looks like this:
"start": "webpack --colors --progress"
As I was saying, when I launch the debugger, it simply hangs and doesn't do anything. The only message I get inside the debugger console is Webpack is watching the files…

Answer 1

I'm think, that your configuration is not correct. In "program", choose file from your application, not from webpack, for example, "server.js" or as below, "index.js".
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/index.js"
}
There can be also other problem - do you have any breakpoints added in VSCode? If not, debugger just doesn't work.