reactjs - Docker コンテナーで Webpack 5 を使用できるようにするにはどうすればよいですか?

Question

昨年 2020 年 10 月にリリースされたばかりの最新の webpack バージョンである v5 を使用しようとしていますが、docker が webpack を見つけることができず、問題が発生しています。ただし、v4 などの以前のバージョンの webpack を使用した場合は機能します。現在のプロジェクトで docker を使用して最新の webpack を使用したいと考えています。どうすればこれを修正できますか? docker コンテナーで webpack v5 を使用できるようにするにはどうすればよいですか。ありがとうございました。

これは、実行した場合の出力ですdocker-compose up。

    Attaching to frontend-react2_app_1
    app_1  | 
    app_1  | > frontend-react2@1.0.0 start /usr/src/app
    app_1  | > webpack serve --mode=development
    app_1  | 
    app_1  | sh: webpack: not found
    app_1  | npm ERR! code ELIFECYCLE
    app_1  | npm ERR! syscall spawn
    app_1  | npm ERR! file sh
    app_1  | npm ERR! errno ENOENT
    app_1  | npm ERR! frontend-react2@1.0.0 start: `webpack serve --mode=development`
    app_1  | npm ERR! spawn ENOENT
    app_1  | npm ERR! 
    app_1  | npm ERR! Failed at the frontend-react2@1.0.0 start script.
    app_1  | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    app_1  | 
    app_1  | npm ERR! A complete log of this run can be found in:
    app_1  | npm ERR!     /root/.npm/_logs/2020-11-06T11_30_34_220Z-debug.log

これは私のpackage.json

{
  "name": "frontend-react2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode=development",
    "build": "webpack --mode production",
    "format": "prettier --write src/**/*.{js,jsx,ts,tsx}",
    "lint": "eslint --fix src/**/*.{js,jsx,ts,tsx}"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "@babel/preset-typescript": "^7.12.1",
    "@babel/runtime": "^7.12.5",
    "@types/react": "^16.8.24",
    "@types/react-dom": "^16.0.5",
    "@types/webpack": "^4.41.24",
    "@types/webpack-dev-server": "^3.11.1",
    "babel-loader": "^8.1.0",
    "eslint": "^7.12.1",
    "eslint-config-airbnb-typescript-prettier": "^3.1.0",
    "html-webpack-plugin": "^4.5.0",
    "prettier": "^2.1.2",
    "sass": "^1.29.0",
    "sass-loader": "^10.0.5",
    "ts-loader": "^8.0.9",
    "ts-node": "^9.0.0",
    "typescript": "^4.0.5",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

私のDockerfile：

FROM node:14.15-alpine3.10

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

CMD ["npm", "run", "start"]

これは私のdocker-compose.ymlです：

version: '3.8'

services:
  app:
    build: .
    volumes:
      - .:/usr/src/app
      - /usr/src/app/node_modules
    working_dir: /usr/src/app
    ports:
      - 3000:3000

ありがとうございました。