How to add multiple source_path in Rails Webpacker

Question

We are using Webpacker for loading JavaScripts and CSS files into the webpage.

Currently, in webpacker.yml we have set the source_path to app/javascript. Which is working fine to load the JavaScript files form this directory.

But in our application, we have an engines directory, and all the JavaScript files are located inside different engines in engines directory, to load these JavaScript files we created a link in app/javascript/packs for each pack in engines directory.

Is there a better way to do this, without providing links OR by providing multiple source_path in the webpacker.yml file.

---

For reference:

This is the folder structure currently we have:

-root
 |
 |-app
   |-javascript
     |-packs
       |-[link to engine1.js pack files]
       |-[link to engine2.js pack files]
 |-engines
   |- engine1
      |-app
        |-javascript
        |-packs
          |-engine1.js
   |- engine2
      |-app
        |-javascript
        |-packs
          |-engine1.js

And this is how the webpacker.yml configuration

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: ['app/assets']

Answer 1

I think you'll want to do something like this:

additional_paths: ['engines']

Source: https://github.com/rails/webpacker#resolved

If you are adding Webpacker to an existing app that has most of the assets inside app/assets or inside an engine, and you want to share that with webpack modules, you can use the additional_paths option available in config/webpacker.yml. This lets you add additional paths that webpack should lookup when resolving modules: