I'd suggest that webpacker follow the JavaScript, CSS, Images, Fonts organization that we've used for React on Rails. It's really quite simple:

• All client-related files go under a top level directory called /client

Over the past 1.5+ years, we've found this setup to be extremely popular with our community. This setup has several advantages:

1. Client-side specialists can use a client-side editor, such as Atom or Webstorm and simply open the /client directory. Under the current structure, one open the "javascript" folder, but then several key files, such as the package.json, node_modules, and webpack configs are not accessible.
2. Client side linting and testing is more cleanly organized.
3. Backend specialists can have their editor ignore the /client directory.
4. The problem of having the node_modules be outside the top level is easily solved by having a minimal package.json like this. The postinstall script will dig into the /client directory and run yarn.

{
  "private": true,
  "scripts": {
    "postinstall": "cd client && yarn",
  }
}

Possibly, the server side could eventually go under /server so the number of top level directories is minimal.

https://github.com/gauravtiwari/webpacker-example-app