Как создать код es2017 с помощью веб-пакета?

Question

В настоящее время я переношу старое расширение Firefox и хочу использовать функции es2017.

Зависимости:

"devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.4",
  "babel-preset-env": "^1.6.1",
  "babel-preset-es2017": "^6.24.1",
  "eslint": "^4.19.0",
  "gulp": "^4.0.0",
  "web-ext": "^2.5.0",
  "web-ext-types": "^2.0.1",
  "webpack": "^4.1.1",
  "webpack-stream": "^4.0.2"
}

Мой первый тестовый файл:

export class Test {

    async hello(param) {
        console.debug('Test', browser);
        return `Hello ${param}, how are you?`;
    }
}

Мой второй тестовый файл:

import { Test } from './Test';

browser.runtime.onStartup.addListener((a, b, c, d) => {
    console.debug('Arguments:', a, b, c, d);
    const test = new Test();
    test.hello('World').then((result) => {
        console.debug('Result:', result);
    });
});

Мой gulpfile.babel.js:

import gulp from 'gulp';
import webpack from 'webpack';
import webpackStream from 'webpack-stream';

const backgroundJS = (done) => {
    gulp.src(paths.src.js.background)
        .pipe(webpackStream(require('./webpack.config.js')), webpack)
        .pipe(rename('background.js'))
        .pipe(gulp.dest(paths.dist.firefox + '/js'));
    done();
};

Мой webpack.config.js:

module.exports = {
    output: {
        filename: 'bundle.js',
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            loader: 'babel-loader',
            query: {
                presets: ['es2017']
            }
        }]
    }
};

Результат в background.js не содержит никакого кода es2017...

() => {} преобразуется в форму функции
занятия заменяются чем-то очень некрасивым
а также новой строки `` больше нет...

Что я делаю неправильно?