Webpacker slow and duplicate files in public/assets

Using Rails / Webpacker to compile assets.

Webpacker started to become very slow (3 minute compile times). I noticed that the public/assets folder is getting filled with finger printed assets like..

application-1e69eb85a81f4a963fde.js application-828cf61e1e6dc295ffee.js application-95ba1bc02eaf571bca3d.js

And new ones are created with every page refresh.

I'm starting the server in development mode, I'm not sure why every refresh is resulting in a newly finger-printed asset. But my guess is this is what is causing the issue.

Has anyone experienced this?

webpack.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: client
  source_entry_path: bundles
  public_output_path: assets/bundles # outputs to => public/assets/bundles
  cache_path: tmp/cache/webpacker
  cache_manifest: false

  extensions:
    - .jsx
    - .js
    - es6.js
    - .sass
    - .scss
    - .worker
    - .worker.js
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg
    - .eot
    - .svg
    - .ttf
    - .woff

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost: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': '*'
    watch_options:
      ignored: /node_modules/


test:
  <<: *default
  compile: true

  # Compile test bundles to a separate directory
  public_output_path: bundles-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

Solution

I am adding this answer so that It might help other users.

Turn off hmr setting if you dont want to update your js files without browser reload.

hmr: false

In RAILS, webpacker.yml has different settings, and one of those is hmr, which is Hot Module replacement, a Webpack feature that updates your Javascript without a browser reload. The 'module' in hot module replacement just refers to each of your Javascript source code files. To make these updates happen, Webpack installs the HMR Runtime into your output bundle.

for more details about HMR- CHECK THIS