Using vscode debugger with webpack and 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.