three.jsをWebサイト上で動かす

npm --version
6.14.10
node -v
v14.15.4

$ npm init -y

$ npm install -D webpack webpack-cli webpack-dev-server babel-loader @babel/core  @babel/preset-env

$ npm install three

//追加
  "scripts": {
    "build": "webpack",
    "dev": "webpack serve"
  },

Debugger attached.

> three.js-webpack@1.0.0 dev D:\workplace\xxx\xxx-webpack
> webpack serve

Debugger attached.
[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? }
Waiting for the debugger to disconnect...
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! three.js-webpack@1.0.0 dev: `webpack serve`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the three.js-webpack@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\UserName\AppData\Roaming\npm-cache\_logs\2022-02-24T07_35_56_273Z-debug.log
Waiting for the debugger to disconnect...