https://github.com/takeyuweb/rails-webpack-sample
https://github.com/takeyuweb/rails-webpack-sample
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/takeyuweb/rails-webpack-sample
- Owner: takeyuweb
- Created: 2019-05-22T14:27:41.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-22T20:14:52.000Z (about 7 years ago)
- Last Synced: 2025-01-22T05:16:06.710Z (over 1 year ago)
- Language: Ruby
- Size: 248 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Rails + Webpack Sample
```html
RailsWebpackSample
Home#index
Find me in app/views/home/index.html.erb
```
## Setup
```bash
$ bundle install
$ npm install
```
## Start
```bash
$ npx webpack -p
$ bundle exec rails s
```
Open http://localhost:3000
## webpack
`app/frontend` 以下
### app/frontend/javascripts
JavaScriptを入れるところ
`webpack.config.js` で `app/frontend/javascripts/hello_world.ts` を `hello_world` という名前のエントリーポイントにしている。
Railsテンプレート中で `javascript_bundle_tag "hello_world"`
### app/frontend/styles
SCSSを入れるところ
`webpack.config.js` で `app/frontend/styles/style.scss` を `style` という名前のエントリーポイントにしている。
Railsテンプレート中で `stylesheet_bundle_tag "style"`
### app/frontend/images
画像を入れるところ
`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テンプレート中から参照したい ](https://github.com/takeyuweb/rails-webpack-sample/issues/6)