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']

Claret

I think you can just add app/engines to resolved_paths. – Francisco

@ScottSchupbach But actual files are in app/engines/[engine_name]/app/javascript in there different engine names will be there. – Claret

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:

Homomorphism

Answer 2

Perhaps a better way to do what you mention is to take advantage of the webpacker folder structure.

Instead of creating links to files inside the "app/javascript/packs" folder, maybe you could reference them through the "index.js" files in those folders.

---

According to the documentation, webpacker will look for the "index.js" file inside each imported folder.

So you could modify the file structure to something like this:

-root
 |
 |-app
   |-javascript
     |-packs
       |-engine1.js
       |-engine2.js
   |-engines
     |- engine1
       |-index.js
       |-app
         |-javascript
         |-packs
           |-engine1.js
     |- engine2
       |-index.js
       |-app
         |-javascript
         |-packs
           |-engine1.js

Create the files and import the respective folder

// app/javascript/packs/engine1.js
import 'engines/engine1'

// app/javascript/packs/engine2.js
import 'engines/engine2'

This will import the "index.js" file from the mentioned folder, and within that file you can import everything else you need from the "engineX" folder.

Then you can reference them as follows

<%# app/views/layouts/application.html.erb %>

<%= javascript_pack_tag 'engine1' %>
<%= javascript_pack_tag 'engine2' %>

All this can be done, without the need to modify the default Webpacker configuration

Isogloss