所以我正在创建一个ReactJS应用程序并为其配置webpack。下面是我的webpack配置：
webpack.config.js

const webpack = require('webpack');
const HtmlWebPackPlugin = require( 'html-webpack-plugin' );
const path = require( 'path' );
const dotenv = require('dotenv');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const env = dotenv.config().parsed;

const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
}, {});

module.exports = {
   context: __dirname,
   entry: ['./src/js/index.js','./src/sass/index.scss'],
   output: {
      path: path.resolve( __dirname, 'dist' ),
      filename: 'main.js',
      publicPath: '/',
   },
   devtool: 'eval-source-map',
   devServer: {
      historyApiFallback: true,
      contentBase: path.join(__dirname, 'dist'),
   },
   module: {
      rules: [
         {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: [/node_modules/],
            query: {
                presets: ['@babel/react', "@babel/preset-env"]
            }
         },
         {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: [/node_modules/],
            query: {
                presets: ['@babel/react', "@babel/preset-env"]
            }
        },
         {
            test: /\.scss$/,
            use: ["style-loader", "css-loader", "sass-loader"]
        },
         {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
         },
         {
            test: /\.(gif|png|jpe?g|svg|webp)$/i,
            use: [
               'file-loader',
               {
                  loader: 'image-webpack-loader',
                  options: {
                  bypassOnDebug: true, // [email protected]
                  disable: true, // [email protected] and newer
                  },
               },
            ],
         }
    ]
   },
   plugins: [
        new HtmlWebPackPlugin({
            template: path.resolve( __dirname, 'public/index.html' ),
            filename: 'index.html',
        }),
        new webpack.ProvidePlugin({
            "React": "react",
        }),
        new CopyWebpackPlugin({
            patterns: [
                { from: 'public/assets' }
            ]
        }),
        new webpack.DefinePlugin(envKeys),
   ]
};

一切都很顺利，直到我意识到我所有的按钮都不起作用，我检查了所有的函数和语法，以确保如果我得到它的错误，但事实证明我没有犯错误
这是我的按钮的功能：

const submitMail = e => {
    console.log('here')
    alert('here')
    e.preventDefault()
    e.stopPropagation()
    e.nativeEvent.stopImmediatePropagation();
    console.log('test')
}

我试着在我的测试按钮调用它，但它不会工作，它没有发送警报，它甚至不会记录我所有的控制台。日志

<button onClick={e => submitMail(e)}>test</button>

我还试图把它们放在我的表单中，在onSubmit沿着另一个按钮来触发它，看看它是否会触发“console.log”，这也不起作用：

<form onSubmit={e => submitMail(e)}>
  <input id="banner-text-input-email-input-wrapper-email-input" placeholder="Enter your email here"/>
  <input id="banner-text-input-email-input-wrapper-submit-input" onClick={()=>console.log('hi')} type="button" value="Button Value"/>
</form>

注意：我已经尝试运行正常的react应用程序：
react-script启动
所有的按钮都能用！在这一点上，我只能认为它不工作的原因是因为我的webpack配置，这里也是我的webpack命令以防万一：
webpack serve --open --mode=development --config= webpack.js.js--hot