Webpacker adding "dist" folders

Question

I'm running Rails 6 w/ React-Rails and using a webpack-dev-server with hot reloading for development. Most of the time everything works fine; when I save changes to my javascript files webpacker recompiles and loads the updates.

Twice now while developing I'll be in a "good" state then I'll click save and all of a sudden a new folder while be created adjacent to my file called dist. For example, I've got a file called app/javascript/components/common/uploader/index.tsx and when I save changes to the file, now folder app/javascript/components/common/uploader/dist is created with the file index.js inside of it.

My understanding is that all these sorts of files should be stored in memory when using webpack-dev-server, so surprised to see them showing up. It's also particularly odd that this starts happening without me changing any settings, just saving the same file twice changes it and reverting back to master doesn't solve the problem. The first time I got rid of it by deleting the entire root folder and then syncing back to the master on my repo but now that isn't doing the trick.

  dev_server:
    https: false
    host: webpacker
    port: 3035
    public: 0.0.0.0:3035
    hmr: true
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    content_base: public
    watchContentBase: true
    watch_options:
      ignored: /node_modules/
      poll: 1000
      aggregateTimeout: 500
    optimization:
      removeAvailableModules: false
      removeEmptyChunks: false
      splitChunks: false

Answer 1

Turns out it wasn't a webpacker problem at all, issue was with VS Code Compile Hero... Vs code create folder automatically with (dist) name