Rails6のwebpackerを使って、JSを表示するまでのログ

#　はじめに
app/javascript/packs内がjsを書く場所。
これを書いて呼び出す。

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

webpackerにもこう書かれている

source_entry_path: packs

jsのコンパイルは、コマンドを打つ必要がある

bin/webpack-dev-server which can be used for 
live reloading in the development phase. We have to run the 
webpack-dev-server separately for this purpose

これは、webpackerのhelperメソッド

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

https://prathamesh.tech/2019/08/26/understanding-webpacker-in-rails-6/

#　本題

javascript_pack_tagを使ってjsを変更。
↓
反映されていない
↓
このコマンドを打つ

bin/webpack-dev-server

Cannot assign requested address - bind(2) for "localhost" port 3035 (Errno::EADDRNOTAVAIL)

↓

class Errno::EADDRNOTAVAIL

上のstacoverflowにしたがって変えてみた。

今のwebpack.yml

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
 ++ host: 0.0.0.0
    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/**"

エラー内容が変わった。

# bin/webpack-dev-server
Another program is running on port 3035. Set a new port in /myapp/config/webpacker.yml for dev_server
# bin/webpack-dev-server
yarn run v1.22.5
error Command "webpack-dev-server" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

webpacker.ymlのportを変えた。

    port: 3036
    public: localhost:3036

package.jsonにこれを追加

https://classic.yarnpkg.com/en/docs/cli/run

"scripts": {
    "build": "babel src -d lib",
    "test": "jest"
  }

エラー内容変わらず。

webpack: jsの依存関係一式をいい感じにまとめたもの

yarn(npmを便利にしたもの): JavaScriptのパッケージマネージャ.package.jsonが使える。

webpackerが、yarnを管理している

bin/webpack-dev-server
yarn run v1.22.5
error Command "webpack-dev-server" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

yarnコマンドがそもそもない。

webpack installしてみる。もう一回上書きし直してみる。

bin/rails webpacker:install

いけた

Done in 36.31s.
Webpacker successfully installed 🎉 🍰
# bin/webpack-dev-server
ℹ ｢wds｣: Project is running at http://localhost:3035/
ℹ ｢wds｣: webpack output is served from /packs/
ℹ ｢wds｣: Content not from webpack is served from /myapp/public/packs
ℹ ｢wds｣: 404s will fallback to /index.html

簡単なjsコードを書いて、ブラウザで確認してみる。

application.html.erb

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

app/javascript/packs/application.js

console.log('javascript')

ブラウザでconsoleを確認

application.js:28 javascript

できた。これでwebpackerを使ってjsを書く事ができるようになった。

#　ひとこと
webpackerを使ってJSを書いたら、ブラウザのロード時間が倍に増えた。今度はそこを改善していきたい。