1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
# Folder Structure
## Packs a.k.a webpack entries
"Packs" is a special directory made only for webpack entry files so don't put anything
here that you don't want to link in your views.
## Source
You can put your app source under `app/javascript` folder or whatever you have configured
in `config/webpacker.yml`.
## Example
Let's say you're building a calendar app. Your JS app structure could look like this:
```js
// app/javascript/packs/calendar.js
import 'calendar'
```
```
app/javascript/calendar/index.js // gets loaded by import 'calendar'
app/javascript/calendar/components/grid.jsx
app/javascript/calendar/styles/grid.sass
app/javascript/calendar/models/month.js
```
```erb
<%# app/views/layouts/application.html.erb %>
<%= javascript_pack_tag 'calendar' %>
<%= stylesheet_pack_tag 'calendar' %>
```
But it could also look a million other ways.
## Namespacing
You can also namespace your packs using directories similar to a Rails app.
```
app/javascript/packs/admin/orders.js
app/javascript/packs/shop/orders.js
```
and reference them in your views like this:
```erb
<%# app/views/admin/orders/index.html.erb %>
<%= javascript_pack_tag 'admin/orders' %>
```
and
```erb
<%# app/views/shop/orders/index.html.erb %>
<%= javascript_pack_tag 'shop/orders' %>
```
|
