VSCode, webpack, devServer, hot reload (HMR) and remote debugging - do I have to pick one?

645 Views Asked by At

I will paste what I hope are my relevant config files at the end, please let me know if I included too little (or too much, so I don't confuse future searchers). For context, I am debugging a complex, monolithic web app that runs only in tandem with a server which I'm pretty sure the details of are irrelevant. I set up a webpack devServer with HMR enabled, and a proxy for the rest of my files. For production, webpack packs my app into a single JavaScript file that we deploy.

Webpack devServer successfully compiles to memory, and when we connect, the proxy correctly pulls in all the non-webpack stuff, and when we then change code, it is recompiled on the fly and our web client updates in real time. That's fantastic, and is exactly as I wanted it!

However, as soon as I attach the VSCode debugger to our Chromium instance in order to have awesomeness like break points and variable inspections, HMR stops working. The moment I stop the debugger, HMR reloads. Connect debugger, HMR stops working again. I figured maybe the 'reload' button in the VSCode debug hover ... thingy would at least manually reload changes, but it doesn't seem to do anything when remote begging Chrome.

Is that a limitation of the technology stack I am using, or am I 'doing it wrong' ™ ?

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "name": "Attach to Chrome running against localhost",
            "urlFilter": "http://127.0.0.1:9000/*",
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true,
            "trace": true
        }
    ]
}

Relevant parts of webpack.common.config.js:

module.exports = {
  entry: {
    appClient: [
      path.resolve(__dirname, 'src/main.js')
    ]
  },
  output: {
    filename: 'app-client.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/client/'
  },
  module: {
    rules: [ ... ]
  },
  optimization: { ... },
  plugins: [
    ...
    new ReactRefreshPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    devtool: 'inline-source-map',
    static: {
      directory: outputPath,
      serveIndex: true
    },
    devMiddleware: {
      index: false
    },
    proxy: [
      {
        context: ['**', '!/client/app-client.js'],
        target: 'http://localhost:8000',
        proxyTimeout: 1000 * 60 * 30,
        timeout: 1000 * 60 * 30
      },
    ],
    compress: false,
    port: 9000,
    hot: true
  }
};
0

There are 0 best solutions below