如何创建一个自定义的webpack加载器，使其仍然能够正确地编译我的react代码？

npm init -y

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-react --save-dev

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
          },
        },
      },
    ],
  },
};

"scripts": {
  "build": "webpack"
}

npm run build