如何配置Webpack以使用Babel这样的自定义编译器来转换代码？

Question

我正在编写纯es6，我在其中使用babel使用webpack将代码转换为es5。我想在完整编译之前或之后通过某些函数传递代码，如下图所示：-

https://www.twilio.com/docs/errors/20003

我的webpack正常配置：-

var path               = require('path'),
    HtmlWebpackPlugin  = require('html-webpack-plugin'),
    ExtractTextPlugin = require('extract-text-webpack-plugin'),
    CleanWebpackPlugin = require('clean-webpack-plugin'),
    extractCSS = new ExtractTextPlugin({ filename: 'css.bundle.css'}),
    MyCompiler         = require('my-compiler');

  //Mycompiler.compile()//this is the function where i want to pass 
    my code from     

module.exports = {
   mode: 'development',
   entry: './src/app.js',
   output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './app.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [require('@babel/plugin-proposal-object-rest-spread')]
          }
        }
      },
      {
        test: /\.css$/,
        use: extractCSS.extract({ // Instance 1
          fallback: 'style-loader',
          use: [ 'css-loader' ]
        })
      },
      {
        test:/\.html$/,
        use:['html-loader']
      },
      {
        test:/\.html$/,
        use:[
          {
            loader:'file-loader',
            options:{
              name:'[name].[ext]',
            }
          }
        ],
        exclude:path.resolve(__dirname,'./src/index.html')
      },
      {
        test:/\.(jpg|png)$/,
        use:[
          {
            loader:'file-loader',
            options:{
              name:'[name].[ext]',
              outputPath:'img/',
              publicPath:'img/'
            }
          }
        ]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    }),
    extractCSS
  ]
};

如图所示，我想像图1或图2一样，任何人都可以帮助我，我想将所有代码通过 Mycompiler.compile（）传递。伙计们请帮助我，我试图从最近1个月开始这样做，但我无法解决此问题。请帮助我