Javascript React应用程序的网页包再生器编译问题

我正在尝试打包我的React应用程序进行生产，因为它现在在我的EC2服务器上的大小太大了。我正在使用webpack，并出现以下编译错误：

WARNING in ./src/components/navbar.js 269:34-53
export 'default' (imported as 'React') was not found in 'react' (possible exports: __esModule)
 @ ./src/App.js 24:0-44 1450:42-48
 @ ./src/index.js

WARNING in ./src/components/navbar.js 271:53-72
export 'default' (imported as 'React') was not found in 'react' (possible exports: __esModule)
 @ ./src/App.js 24:0-44 1450:42-48
 @ ./src/index.js

WARNING in ./src/components/navbar.js 276:22-41
export 'default' (imported as 'React') was not found in 'react' (possible exports: __esModule)
 @ ./src/App.js 24:0-44 1450:42-48
 @ ./src/index.js

[……]

当我运行npm运行脚本webpackbuild时，我得到了以下信息：

"webpackbuild": "webpack --config webpack.config.js"

我使用了很多ES6语法，我意识到在苹果系统上有时某些功能不起作用。所以我想这将是一举两得。最小化和优化。这个问题是我不确定这里的问题是什么。我甚至尝试在index.js文件中放置以下内容

import "core-js/stable";
import "regenerator-runtime/runtime";

下面是我的webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const regeneratorRuntime = require("regenerator-runtime");


module.exports = {
    entry: "./src/index.js", // The entry point for the application
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index_bundle.js' // This will be the created bundle file that webpack creates for react to use in production
    },
    module: {
        rules: [
            { 
                test: /\.js$/, use:'babel-loader'
            },
            {
                test: /\.svg$/, use: 'svg-inline-loader'
            },
            {
                test: /\.css$/, use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.(png|jpe?g|gif)$/i, use: 'file-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './public/index.html'}),
        new webpack.ProvidePlugin({
            process: 'process/browser'
        })
    ],
    mode: 'production' // Can be set to development or production. Webpack will minify code and strip warnings
}

module.exports = {
    presets: [ "@babel/preset-env", "@babel/preset-react"],
    plugins: [
        [
            "@babel/plugin-proposal-class-properties",
            {
                "loose": true
            }
        ],
        [
            "@babel/plugin-transform-runtime", 
            {
                "asyncGenerators": true,
                "generators": true,
                "async": true
            }
        ],
        ["@babel/plugin-proposal-export-default-from"]
    ]
};

下面是我的babel.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const regeneratorRuntime = require("regenerator-runtime");


module.exports = {
    entry: "./src/index.js", // The entry point for the application
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index_bundle.js' // This will be the created bundle file that webpack creates for react to use in production
    },
    module: {
        rules: [
            { 
                test: /\.js$/, use:'babel-loader'
            },
            {
                test: /\.svg$/, use: 'svg-inline-loader'
            },
            {
                test: /\.css$/, use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.(png|jpe?g|gif)$/i, use: 'file-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './public/index.html'}),
        new webpack.ProvidePlugin({
            process: 'process/browser'
        })
    ],
    mode: 'production' // Can be set to development or production. Webpack will minify code and strip warnings
}

module.exports = {
    presets: [ "@babel/preset-env", "@babel/preset-react"],
    plugins: [
        [
            "@babel/plugin-proposal-class-properties",
            {
                "loose": true
            }
        ],
        [
            "@babel/plugin-transform-runtime", 
            {
                "asyncGenerators": true,
                "generators": true,
                "async": true
            }
        ],
        ["@babel/plugin-proposal-export-default-from"]
    ]
};

---

我的包在package.json文件中，因此没有问题。想知道是否有人可以解释一下

我在模块中设置了一个目标来修复这个错误，如下所示：target:['web'，'es5']，