Webpackを使ってビルドするときにハマったことまとめ

yarn initして、yarn addで諸々パッケージをインストールして、
さあいざ

$ ./node_modules/.bin/webpack-dev-server

と打ち込んでサーバーを起動させようとしたらエラーが。

簡素ですが、解決までの道のりをメモφ(･･。

The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
→

$ yarn add webpack-cli

で対処。

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

起動時にmodeの指定をすることで回避

$ ./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はインストール済みだったはずだが、再度

$ 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

が、

$ 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時間くらい合計で処理にかかったかもしれない…