你如何使用 Webpack 和 Babel 进行编译？

Question

我有一个看起来像这样的包 json：

  "scripts": {
    "start": "NODE_ENV=development node node_modules/webpack/bin/webpack.js --progress  --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development node node_modules/webpack/bin/webpack.js --watch --progress  --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "NODE_ENV=production node node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
"dependencies": {
    "postcss-custom-properties": "^11.0.0",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-qr-barcode-scanner": "^1.0.6",
    "webpack-mix": "^3.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.14.8",
    "@babel/core": "^7.14.8",
    "@babel/plugin-proposal-class-properties": "^7.3.4",
    "@babel/preset-env": "^7.14.8",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.2.2",
    "gulp-babel": "^8.0.0",
    "import-glob": "^1.5.0",
    "laravel-mix": "^6.0.25",
    "postcss": "^8.3.6",
    "sass": "^1.36.0",
    "sass-loader": "^12.1.0",
    "webpack": "^5.47.1",
    "webpack-cli": "^4.0.0"
  }

我正在尝试使用webpack将src/qr.js 中的javascript 文件编译为dist/qr.js 。

尽管在使用npm run production编译时我收到了这个错误。

我在这里有几个问题：

1. babel怎么了？ 我是用webpack编译的， webpack是用 babel 编译的吗？
2. 尝试安装 @babel/preset-cli 时，它说找不到 npm 包。

有谁知道我在这里做错了什么？