<!DOCTYPE html>
<html>
<head>
<title>RailsWebpackSample</title>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="dX15C0OggA0QK9Scweo/Bm0l7FnWMNGs1rQrlTodQm4JVZI48HBQGaYFa5ffE/yslP6I0vcKphKCmUFlqkl6Mg==" />
<script src="/bundle/hello_world.17631fbd2bb2407e5b58.js" defer="defer"></script>
<link rel="stylesheet" media="screen" href="/bundle/style.a18b434aa32a868e5153.css" />
</head>
<body>
<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>
<!-- app/frontend/images/skyview.jpg -->
<img src="/bundle/images/skyview.bf6a8ac49db7896747fa3b5c65cd71ba.jpg" />
</body>
</html>$ bundle install
$ npm install$ npx webpack -p
$ bundle exec rails sapp/frontend 以下
JavaScriptを入れるところ
webpack.config.js で app/frontend/javascripts/hello_world.ts を hello_world という名前のエントリーポイントにしている。
Railsテンプレート中で javascript_bundle_tag "hello_world"
SCSSを入れるところ
webpack.config.js で app/frontend/styles/style.scss を style という名前のエントリーポイントにしている。
Railsテンプレート中で stylesheet_bundle_tag "style"
画像を入れるところ
app/frontend/images/path/to/file.png を使いたいとき
SCSS中なら url("../images/path/to/file.png") （../ の部分は .scss からの相対ディレクトリ指定）
JavaScript中なら import img from '../images/path/to/file.png' または const img = require('../images/path/to/file.png')
Railsテンプレート中なら image_bundle_tag "style"
※これだけでは参照できなくて、別途 require('../images/path/to/file.png') のようにwebpackに教えてあげる必要がある。
既知の課題 sprocketsのようにapp/frontend/images においた画像をJavaScript中でのimportなしにimage_bundle_tagでRailsテンプレート中から参照したい