我在继承的项目中使用babel实施webpack时遇到了一些麻烦。

我想在现有项目上使用babel和webpack，但是我遇到了Uncaught ReferenceError：require未定义。

这是我的webpack配置：

 const HtmlWebPackPlugin = require('html-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const webpack = require('webpack');
 const nodeExternals = require('webpack-node-externals');
 const path = require('path');

module.exports = {
  entry: `${__dirname}/src/index.js`,output: {
    path: path.resolve(__dirname,'dist'),filename: 'bundle.js',publicPath: '/'
  },plugins: [
 new HtmlWebPackPlugin({
   template: "./public/index.html",filename: "./index.html",minify: {
     removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true
    }
  }),new TerserPlugin({
    parallel: true,terserOptions: {
      ecma: 6,},})
   ],devserver: {
 inline: true,hot: true
 },devtool: 'sourcemap',module: {
   rules: [
    {
     test: /\.jsx?$/,exclude: /node_modules/,loader: 'babel-loader'
    },{
    test: /locales/,loader: '@alienfast/i18next-loader',{
    test: /\.s?css$/,loaders: ['style-loader','css-loader','sass-loader']
   },{
    test: /\.html$/,loader: 'html-loader'
   },{
    test: /\.svg$/,use: ['@svgr/webpack'],{
    test: /\.(png|jpe?g|gif)$/i,use: [
      {
        loader: 'file-loader',],]
   },resolve: {
   extensions: ['.js','.jsx']
  },externals: [nodeExternals()],node: {
   fs: "empty"
  } 
 };

这是我的babel配置文件：

 {
 "presets": ["@babel/preset-react"],"plugins": [ "transform-class-properties","@babel/plugin-proposal-object-rest-spread","@babel/plugin-syntax-dynamic-import","@babel/plugin-transform-runtime"],"sourceType": "unambiguous",}

我已经组合了相当多的组合，但是遇到了麻烦，欢迎任何帮助：）