webpack4の記事を見ながら実装していくとエラーしたので載せておく

## 環境
* react
* typescript
* webpack 5.24.3
* babel
* emotion

上記使っていく予定で、Qiitaの他の方のwebpack4に対応した記事を参考にしながら、つまづいたことを記録していきます。

```json:package.json
{
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "^7.13.9",
    "@babel/preset-react": "^7.12.13",
    "@emotion/babel-preset-css-prop": "^11.2.0",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.1",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.0",
    "ts-loader": "^8.0.17",
    "typescript": "^4.2.3",
    "webpack": "^5.24.3",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@emotion/core": "^11.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
}
```

```json:tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "target": "es5",
    "module": "ES2015",
    "lib": [
      "dom",
      "es2020"
    ],
    "jsx": "react",
    "esModuleInterop": true,
    "sourceMap": true,
    "outDir": "./dist",
    "removeComments": true,
    "noUnusedLocals": true,
    "typeRoots": [
      "node_modules/@types"
    ],
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
}
```

```javascript:webpack.config.js
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  mode: "development",
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    // webpack4の設定
    // publicPath: "dist"
  },
  
  devtool: "inline-source-map",
  
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./index.html",
    })
  ],
  
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ['@babel/preset-env']
            }
          },
          {loader: "ts-loader"}
        ],
        exclude: /node_modules/,
      }
    ]
  },
  
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },
  
  devServer: {
    contentBase: path.resolve(__dirname, "dist"),
    // webpack5ではoutputからここに移動させる
    publicPath: "dist",
    host: "localhost",
    port: "3000",
    open: true,
  }
}
```

```html:index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
```

```json:.babelrc
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@emotion/babel-preset-css-prop"
  ]
}
```

```json:package.json
{
  "scripts": {
    "build": "webpack",
    "watch": "webpack -w",
    // webpack4では、
    // "dev": "webpack-dev-server",
    // webpack5では、
    "dev": "webpack serve",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}
```

## 何このエラー？

```zsh:command
$ npx dev
npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for inotify@1.4.6: wanted {"os":"linux","arch":"any"} (current: {"os":"darwin","arch":"x64"})
npm ERR! notsup Valid OS:    linux
npm ERR! notsup Valid Arch:  any
npm ERR! notsup Actual OS:   darwin
npm ERR! notsup Actual Arch: x64

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/cygnu/.npm/_logs/2021-03-09T04_20_34_132Z-debug.log
コード[ 'dev@latest' ]で1のインストールに失敗しました
```

`$ npm run (エイリアス)` のコマンドを実行となるため `scripts` のエイリアスで設定している `dev` は `$ npm run dev` となる。npxにはこのエイリアスが紐づいていない?ここで、何時間もつまづいていた。早く公式ドキュメント (https://github.com/webpack/webpack-dev-server) を読むべきだった・・・。

## 参考文献 (参考にした順に記載)
* 「[最新版TypeScript+webpack5の環境構築まとめ](https://ics.media/entry/16329/) (2020/10/11)」(2021/03/09 閲覧)
* Qiita (@savacan)「[駆け出しエンジニアが０からReact/typescript環境構築してみる。](https://qiita.com/savacan/items/9e4e1bcab4f36a65a2e2) (2019/06/10 更新分)」(2021/03/09 閲覧)
* Qiita (@savacan)「[React/TS環境にemotion入れてみる](https://qiita.com/savacan/items/72599685d8784217d229) (2020/10/26 更新分)」(2021/03/09 閲覧)
* 「[WebpackでReactを始める](https://dev-yakuza.posstree.com/react/start/) (2020/12/16)」(2021/03/09 閲覧)
* Qiita (@uryyyyyyy)「[React + TypeScript + Webpackの最小構成](https://qiita.com/uryyyyyyy/items/63969d6ed9341affdffb) (2017/07/28 更新分)」(2021/03/09 閲覧)