reactjs - ReactJS 使用 NPM 找不到模块'@babel/preset-es2015'

Question

我是 ReactJs 的新手。现在我正在使用 reactJs 开发一个小项目，并且正在尝试使用 Webpack 进行配置。但出现以下错误。我不知道如何处理这个？我尝试了一些解决方案但对我不起作用？

webpack.config

var path    = require('path');
var hwp     = require('html-webpack-plugin');

module.exports = {
    entry: path.join(__dirname, '/src/index.js'),
    output: {
        filename: 'build.js',
        path: path.join(__dirname, '/dist')
    },
    module:{
        rules:[{
            exclude: /node_modules/,
            test: /\.(js|jsx)$/,
            loader: 'babel-loader',
            query: {
                presets: [,'@babel/preset-env','@babel/preset-react','@babel/preset-es2015'],
                plugins: ['@babel/proposal-class-properties','@babel/plugin-proposal-object-rest-spread']
              }
        }]
    },
    plugins:[
        new hwp({template:path.join(__dirname, '/public/index.html')})
    ]
}

.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-es2015"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-proposal-object-rest-spread"
    ]
}

包.json

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "dependencies": {
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "reactstrap": "^8.0.0"
  },
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.39.0",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2",
    "webpack-merge": "^4.2.1"
  }
}

问题是，当我点击 npm start 它给我带来一个错误并且页面显示为空：错误

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-es2015' from 'D:\projects\React\sample\demo'
    at Function.module.exports [as sync] (D:\projects\React\sample\demo\node_modules\resolve\lib\sync.js:74:15)

Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html] 1.39 KiB {0} [built]
    [./node_modules/lodash/lodash.js] 528 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Failed to compile.

标签： reactjswebpack