【2021年】rails使用時のwebpacker v6にアップグレードする方法とエラーについて

## TL;DR
[公式ドキュメント](https://github.com/rails/webpacker/blob/master/6_0_upgrade.md)読もう。

## 背景
プロジェクトの定期的なアップグレードをしていた際にwebpack v5に対応したwebpacker v6を使用した時の苦労を簡単にメモします。
日本語の記事が少なかったので、誰かの役に立てばと思って書きます。その代わり(?)に情報の質は低いです(確信ないまま書いていることが多い)。ご了承ください。

## この記事の対象先
- 最新のwebpackerで困ってる人
- webpackerを嫌いになりたくない人
- 今までwebpackerを使ってた人
- これからwebpackerを使う人はだいたい対象じゃありません。

## こんなエラーが起きてる人向け
- ```Field 'browser' doesn't contain a valid alias configuration```
- ```Webpacker::Manifest::MissingEntryError```
- ```TypeError: Cannot read property 'plugins' of undefined```

## なんでこんなことになった？
- webpackが2020年10月にバージョン5になった。
- webpackerが2020年12月にバージョン6(β版)になった。
- これらのせいでフォルダ構成を含め、めちゃくちゃ変わった。
- 大掛かりな変更をしなければついていけないぞ。(2021年3月現在は)

## 私の環境
"@rails/webpacker": "4.2.2" → "@rails/webpacker": "^6.0.0-beta.5"
"webpack": "^4.41.2" → "webpack": "^5.11.0"

## 公式手順
1: ```app/javascript``` フォルダを中身そのままに ```app/packs``` にリネームします。(ようやくrailsのプロジェクトっぽいフォルダ名になりましたね)

```bash:
$ mv app/javascript app/packs  
```

2: ```app/packs/packs```(旧app/javascript/packs) フォルダを中身そのままに ```app/packs/entrypoints``` にリネームします。

```bash:
$ mv app/packs/packs app/packs/entrypoints
```
3: ```config/webpack``` フォルダはいっぱい書き換えるので、別名で保存しておきましょう。 (config/webpack を config/webpack_old にでもしておきましょう)

```bash:
$ mv config/webpack config/webpack_old
```
4: ```config/webpacker.yml``` はいっぱい書き換えるので、別名で保存しておきましょう。 
(config/webpacker.yml を config/webpacker_old.ymlにでもしておきましょう)

```bash:
$ mv config/webpacker.yml config/webpacker_old.yml
```
5: 今の```webpack-dev-server```を一回アンインストールしましょう。

```bash:
$ yarn remove webpack-dev-server
```
6: ```webpacker```をアップグレードしましょう

```ruby:Gemfile
gem 'webpacker', '~> 6.0.0.beta.6' # beta.6が投稿時の最新
```

```bash:
$ bundle install
```

```bash:
$ yarn add @rails/webpacker@next
```

※私は```package.json```の中身をコピーしておいて、一回削除してから以下をしました。なおその際は、後からまた```yarn add```で戻してあげましょう。

```bash:
$ bundle exec rails webpacker:install
```

7-8: もしあなたがjsだけでなく、cssやsass、tsなどもwebpackerの管理下に収めてるなら、[ここ](https://github.com/rails/webpacker#integrations)を参考にしながらconfigを修正しようね。
(```Field 'browser' doesn't contain a valid alias configuration```)のエラーが大量に出る場合の原因はここが悪い。

今までの```environment.js```はなくなりました。```base.js```がその代わりです。
細かい修正はご自身で。```environment```は```webpackConfig```へと変わりました。

参考までに私の完成例をあげます。

```javascript:base.js
const { webpackConfig, merge } = require('@rails/webpacker')
const webpack = require('webpack')
const erb = require('./loaders/erb')

module.exports = merge(webpackConfig, {
  plugins: [new erb()],
  //js.erbを読み込めるようにしています。
  resolve: {
    extensions: ['.css', '.scss']
    //scssとjsをwebpacker管理下に置いています。
  }
});

webpackConfig.plugins.unshift(
  new webpack.ProvidePlugin({
    $:         'jquery/src/jquery',
    jQuery:    'jquery/src/jquery',
    jquery:    'jquery/src/jquery',
  })
  //いつも起こる$やjQueryが読み込めない問題への対応
)
```
また、私はcss(scss)のために、以下の手順を行いました。

```bash:
yarn add css-loader mini-css-extract-plugin css-minimizer-webpack-plugin
```
```bash:
yarn add sass-loader
```

9: ```.browserlistrc``` とか ```browserlist``` をいじってた人はドキュメントみつつよしなにやってください。 
```.browserlistrc``` と ```browserlist``` が両方あるよってエラーが出てたら、

```bash:
rm .browserlistrc
```
で消しましょう。


10: ```extensions```はやり方が変わったとのことです。私は関係なかったのでよくわかりません。[ドキュメント](https://github.com/rails/webpacker/blob/master/README.md#webpack-configuration)みつつよしなにやってください。 
## エラー解説
```text:エラー
Field 'browser' doesn't contain a valid alias configuration
```
これはwebpackerというよりwebpackのエラー。あんまりわかってないんだけど、ファイルが見つからないよエラー。エラーが起きててもサーバー実行時に問題ないこともあるのは謎。
大体拡張子への対応問題(解説7番を見てね)。じゃなくてyarnで独自にインストールしたライブラリ周りでなんかそれらのエラーが起きてるなら、多分そのライブラリのissueにこの問題が上がってる。(2件中2件上がってた)
***
```text:エラー
warning package.json: No license field
```
ライセンスを入れなきゃいけなくなったらしい。private使用だぞってことでこう書いておけばok

```json:package.json
{
  ...いろいろ...
  "license": "UNLICENSED",
  "private": true
}
```
***
```text:エラー
Webpacker::Manifest::MissingEntryError
```
EntryPointになにもないよってエラー。私は公式の手順を踏まず、gemのwebpackerだけを最新に上げた際に起きた。```javascript/packs``` じゃなくて ```packs/entrypoints``` がエントリーポイントに変わったんなら、そりゃあるわけないよね。手順をしっかり踏もう。

***
```text:エラー
TypeError: Cannot read property 'plugins' of undefined
```
今までの```environments.js```を読み込んでると起こるエラー。書き方が変わってるんだから、昔の書き方がうまくいくわけないね。ちゃんと一回きれいに```webpacker:install```しよう。

## 参考にした記事
- webpack-dev-serverの歴史がわかった記事 → https://qiita.com/IgnorantCoder/items/74b60ef53c3c1aa4aebc