$ rails -v
Rails 6.0.3.2
$ ruby -v
ruby 2.7.1p83 (2020-03-31 revision a0c7c23c9c)
# Gemfile.lock
# ...
webpacker (5.2.1)
# ...
# directory structure
app/javascript/
├── images
│ └── logo.png
└── packs
├── application.js
└── application.scss
# app/views/layouts/application.html.erb
...
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload', media: 'all' %>
...
# config/webpack.yml
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
check_yarn_integrity: false
webpack_compile_output: true
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
extensions:
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
check_yarn_integrity: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# 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
pretty: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
# ...
// app/javascript/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
const images = require.context('../images', true)
const imagePath = (name) => images(name, true)
// app/javascript/application.scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
// Manifest
{
"application.js": "/packs/js/application-5a3819b88d44f36b7821.js",
"application.js.map": "/packs/js/application-5a3819b88d44f36b7821.js.map",
"entrypoints": {
"application": {
"js": [
"/packs/js/application-5a3819b88d44f36b7821.js"
],
"js.map": [
"/packs/js/application-5a3819b88d44f36b7821.js.map"
]
}
}
}
This Fails
# app/views/static/index.html.erb
...
<%= image_pack_tag "media/images/logo.png" %>
...
Webpacker can't find media/images/logo.png in /Users/thomascountz/.../public/packs/manifest.json