Javascript react、wepack、babel、节点、npm启动错误 ./main.js中出现错误

模块构建失败（来自./node_modules/babel loader/lib/index.js）：

错误：无法从“F:\reactapp”中找到模块“@babel/preset-es2015”
在Function.module.exports[作为同步]（F:\reactapp\node\u modules\resolve\lib\sync.js:43:15）
在resolveStandardizedName（F:\reactapp\node）处_modules@babel\core\lib\config\files\plugins.js:101:31）
在resolvePreset（F:\reactapp\node）上_modules@babel\core\lib\config\files\plugins.js:58:10）
在loadPreset（F:\reactapp\node）处_modules@babel\core\lib\config\files\plugins.js:77:20）
在createDescriptor（F:\reactapp\node）处_modules@babel\core\lib\config\config descriptor.js:154:9）
在items.map（F:\reactapp\node_modules@babel\core\lib\config\config descriptor.js:109:50）
在Array.map（）处 在CreateDescriptor处（F:\reactapp\node_modules@babel\core\lib\config\config descriptor.js:109:29）
在createPresetDescriptors处（F:\reactapp\node_modules@babel\core\lib\config\config descriptor.js:101:10）
在PasspersReset（F:\reactapp\node）时_modules@babel\core\lib\config\config descriptor.js:58:96）
@多（网页包）-开发服务器/客户端？http://localhost:8080 （webpack）/hot/dev-server.js./main.js main[2]

“index.html”的子html网页包插件：
1资产
入口点未定义=index.html
[./node_modules/html webpack plugin/lib/loader.js./index.html]448字节{0}[builded]
[./node_modules/lodash/lodash.js]527kib{0}[构建]
[./node_modules/webpack/buildin/global.js]（webpack）/buildin/global.js 472字节{0}[builded] [./node_modules/webpack/buildin/module.js]（webpack）/buildin/module.js 497字节{0}[builded]

i？wdm？：未能编译

是否终止批处理作业（是/否）

package.json文件： 包json文件如下所示。我跟着

巴别塔配置： Babel配置文件如下所示；按照

网页包配置 网页包配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['@babel/react', '@babel/es2015'],
               plugins: ['@babel/proposal-class-properties']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

该软件包已被弃用，您无法再从NPM安装它

现在建议改为使用。

该软件包已被弃用，您不能再从NPM安装它

---

现在建议改为使用。

文件配置中有很多错误。让我试着解决这个问题：

B.法律改革委员会 您不需要以下特性：babel core、babel preset env、babel preset react和babel-preset-es2015。自从重新发行巴别塔7后，它们就被弃用了。将您的代码替换为：

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

webpack.config.js 自从Webpack4发布以来，您不需要通知输入和输出字段（您可以为自定义配置这样做）。默认情况下，webpack将查找位于

src/

目录中的

index.js

文件（该目录必须位于项目的根目录中）。Webpack将从此文件创建模块依赖关系图，并将捆绑文件输出到

dist/

目录。尝试按如下方式配置您的webpack.config.js：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                use: { loader: "babel-loader" }
            },
            {
                test: /\.html$/,
                use: { loader: "html-loader" } //Install it: 'npm i -D html-loader'
            }
        ]
    },
    plugins: [
         new HtmlWebpackPlugin({
              template: "src/index.html" // Put the index.html in the src/ directory
         })
    ]
}

---

我不是配置网页包的专家，我不知道我是否能帮助你。我写了一篇关于媒体设置环境以使用react、babel和webpack的文章，但它是用葡萄牙语写的。如果要检查：

文件配置中有很多错误。让我试着解决这个问题：

B.法律改革委员会 您不需要以下特性：babel core、babel preset env、babel preset react和babel-preset-es2015。自从重新发行巴别塔7后，它们就被弃用了。将您的代码替换为：

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

webpack.config.js 自从Webpack4发布以来，您不需要通知输入和输出字段（您可以为自定义配置这样做）。默认情况下，webpack将查找位于

src/

目录中的

index.js

文件（该目录必须位于项目的根目录中）。Webpack将从此文件创建模块依赖关系图，并将捆绑文件输出到

dist/

目录。尝试按如下方式配置您的webpack.config.js：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                use: { loader: "babel-loader" }
            },
            {
                test: /\.html$/,
                use: { loader: "html-loader" } //Install it: 'npm i -D html-loader'
            }
        ]
    },
    plugins: [
         new HtmlWebpackPlugin({
              template: "src/index.html" // Put the index.html in the src/ directory
         })
    ]
}

---

我不是配置网页包的专家，我不知道我是否能帮助你。我写了一篇关于媒体设置环境以使用react、babel和webpack的文章，但它是用葡萄牙语写的。如果您想查看：

有人请帮助我，我正在努力开始我的第一个项目。我已经重新格式化了您的问题。但是您仍然应该添加一些关于您正在尝试做什么的描述，更重要的是：一个好的问题不仅包括一个错误消息和源文件的转储，还包括一个精心制定的。。。有人请帮助我，我正在努力开始我的第一个项目。我已经重新格式化了你的问题。但是您仍然应该添加一些关于您正在尝试做什么的描述，更重要的是：一个好的问题不仅包括一个错误消息和源文件的转储，还包括一个精心制定的。。。问题。