webpack-dev-server起動時のエラーと解決法

## ファイル構成
[![Image from Gyazo](https://i.gyazo.com/c8bfbb7ff1e85c5d5092d5d46d9067d8.png)](https://gyazo.com/c8bfbb7ff1e85c5d5092d5d46d9067d8)


- package.json
```json
{
  "license": "MIT",
  "scripts": {
    "build": "webpack",
    "start": "webpack serve"
  },
  "dependencies": {
    "webpack": "5.22.0"
  },
  "devDependencies": {
    "webpack-cli": "4.9.0",
    "webpack-dev-server": "^4.15.1"
  }
}
```

- webpack.config.js

```js
const path = require('path');

module.exports = {
  mode: "development",
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
  }
};
```

- index.html
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    ...
  </head>
  <body>
    ...
    <script src="./bundle.js"></script>
  </body>
</html>

```

今回重要なのは上の3つのファイル構成なのでそれ以外は割愛します。

## 概要
webpack-dev-serverを起動しようとしたところエラーが発生したので、調べながらなんとか解決して無事に起動出来ました。

---
## 解決までの行程

まずは上記のようなファイルを構成したあとにターミナルで下記コマンドを実行しました。

```zsh
$ yarn start （yarn webpack serve）
```

すると下記のようなエラーが出ました。

```zsh
$ yarn start
yarn run v1.22.19
$ webpack serve
[webpack-cli] TypeError: cli.isMultipleCompiler is not a function
    at Command.<anonymous> (~/17/node_modules/@webpack-cli/serve/lib/index.js:146:35)
    at async Promise.all (index 1)
    at async Command.<anonymous> (~/17/node_modules/webpack-cli/lib/webpack-cli.js:1687:7)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

上記のエラーについて調べたところ、webpack-cliを「4.10.0」にアップグレードすると直るよ！ということが下記のGitHubのissuesとstack overflowのページから判明しました。

- https://github.com/webpack/webpack/issues/15951
- [How to solve [webpack-cli] TypeError: cli.isMultipleCompiler is not a function](https://stackoverflow.com/questions/72637891/how-to-solve-webpack-cli-typeerror-cli-ismultiplecompiler-is-not-a-function)

なのでアップグレードします。

```zsh
$ yarn add webpack-cli@4.10.0
```

そして今度は行けると思いまた先程のコマンドを実行しました。
そうしたらまた先程とは違うエラーが出ました。

```zsh
$ yarn start
yarn run v1.22.19
$ webpack serve
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'contentBase'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```


どうやら'contentBase'がキーみたいなので、また色々と調べました。
そうしたら「contentBase」の書き方はバージョンが変わった関係などで現在は使えずに変わりに「static」に変更になったみたいです。

- [webpack-dev-serverからcontentBaseが消えてエラーになる](https://zenn.dev/miz_dev/articles/fbd8c297601022)
- [webpack-dev-serverでcontentBaseがエラーを吐いた](https://zenn.dev/iron4/articles/d27d6773778a0d)
- https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

---
というわけでwebpack.config.jsのcontentBaseの箇所を修正しました。

```zsh
const path = require('path');

module.exports = {
  mode: "development",
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    static:{
      directory: path.resolve(__dirname, 'dist'),
    } 
  }
};
```

ちなみにこの時点でのwebpackのバージョン

```zsh
node_modules/.bin/webpack --version
webpack: 5.22.0
webpack-cli: 4.10.0
webpack-dev-server 4.15.1
```

そして今度こそはと思い再度コマンドを実行

```zsh
$ yarn start
yarn run v1.22.19
$ webpack serve
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.0:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/

~~　省略　~~　

webpack 5.22.0 compiled successfully in 69 ms
```

無事にwebpack-dev-serverが起動出来ました！
ここまでお読み頂きありがとうございました！

---


### 参考サイト
- https://github.com/webpack/webpack/issues/15951
- [How to solve [webpack-cli] TypeError: cli.isMultipleCompiler is not a function](https://stackoverflow.com/questions/72637891/how-to-solve-webpack-cli-typeerror-cli-ismultiplecompiler-is-not-a-function)
- [webpack-dev-serverからcontentBaseが消えてエラーになる](https://zenn.dev/miz_dev/articles/fbd8c297601022)
- [webpack-dev-serverでcontentBaseがエラーを吐いた](https://zenn.dev/iron4/articles/d27d6773778a0d)
- https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md