yarn initして、yarn addで諸々パッケージをインストールして、
さあいざ
$ ./node_modules/.bin/webpack-dev-server
と打ち込んでサーバーを起動させようとしたらエラーが。
簡素ですが、解決までの道のりをメモ_φ(・_・。
webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.```
→
```console
$ yarn add webpack-cli
で対処。
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.```
起動時にmodeの指定をすることで回避
```console
$ ./node_modules/.bin/webpack-dev-server --mode development --open
しかし今度はこんなエラーが
SyntaxError: Unexpected token } in JSON at position
どうやらpackage.jsonの中に不要な文字列が混ざり込んでしまったらしい。エラー処理の過程でコピペしたところとかを消去して、すっきりさせたらこのエラーは消えた。
しかし、今度は
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'```
というエラーが。
babel-coreはインストール済みだったはずだが、再度
```console
$ yarn add babel-loader@7
今度は、
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Couldn't find preset "@babel/preset-env" relative to directory```
が、
```console
$ yarn add babel-preset-env
としても解決しない。
すったもんだの末に、
エラー解決を模索する過程で、
https://qiita.com/mimikun/items/860bad42c9b5bd10c7f4と
https://www.valentinog.com/blog/webpack-tutorial/に従って、
.babelrc
{
"presets": [
"@babel/preset-env"
]
}
ファイルを作成していたけれど、その表記がまずかった模様。
取り急ぎ.babelrcファイルを削除したら無事コンパイルされた。
1時間くらい合計で処理にかかったかもしれない…