如何在webpack中使用多个js加载器来转换代码

Question

我刚刚创建了自己的自定义加载程序，如babel-loader，可根据需要转换代码。现在，我试图将我的自定义加载器与babel-loader一起使用。我无法做到这一点。我出错了。

我的代码：-

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'}),
multi = require('multi-loader');



module.exports = {
   mode: 'development',
   entry: './src/app.js',
   output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './app.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: multi(
             'babel-loader'
             'myown-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
  ]
};

当我使用上面的代码时，出现如下所示的错误。

我遇到的错误：-

    [0] multi (webpack)-dev-server/client?http://localhost:8081 ./src/app.js 40 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8081] (webpack)-dev-server/client?http://localhost:8081 260 bytes {main} [built] [failed] [1 error]
[./src/app.js] 260 bytes {main} [built] [failed] [1 error]

ERROR in ./src/app.js
Module build failed (from ./node_modules/multi-loader/index.loader.js):
TypeError: this.query.substr is not a function
    at Object.module.exports.pitch (/home/o/Desktop/CodeBase/js/node_modules/multi-loader/index.loader.js:4:36)
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./src/app.js main[1]

ERROR in (webpack)-dev-server/client?http://localhost:8081
Module build failed (from ./node_modules/multi-loader/index.loader.js):
TypeError: this.query.substr is not a function
    at Object.module.exports.pitch (/home/o/Desktop/CodeBase/js/node_modules/multi-loader/index.loader.js:4:36)
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./src/app.js main[0]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 254 bytes {0} [built]
ℹ ｢wdm｣: Failed to compile.

我想同时使用两个加载程序。请帮助我