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

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

```ruby

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

```

webpackerにもこう書かれている

```ruby
source_entry_path: packs
```

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

```ruby
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メソッド

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

[https://prathamesh.tech/2019/08/26/understanding-webpacker-in-rails-6/](https://prathamesh.tech/2019/08/26/understanding-webpacker-in-rails-6/)

#　本題

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

```ruby
bin/webpack-dev-server

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

↓

[class Errno::EADDRNOTAVAIL](https://docs.ruby-lang.org/ja/latest/class/Errno=3a=3aEADDRNOTAVAIL.html)

https://stackoverflow.com/a/46218266

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

今のwebpack.yml

```ruby
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/**"
```

エラー内容が変わった。

```ruby
# 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を変えた。

```ruby
    port: 3036
    public: localhost:3036
```

package.jsonにこれを追加

```ruby
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を管理している**

```ruby
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
```


いけた

```ruby
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

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

app/javascript/packs/application.js

```ruby
console.log('javascript')
```

ブラウザでconsoleを確認

```ruby
application.js:28 javascript
```

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

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