Сконфигурируйте webpack для vue так, чтобы бэкэнд экспресс-сервер был в ECMA2016

Question

Я написал приложение, используя webpack -boilerplate для vue. Серверная часть, обрабатывающая запросы GET и POST, является express -сервером. IDE - это визуальный студийный код.

Вот что я сделал:

$ vue init webpack app
$ cd app
$ npm install
$ npm install axios express body-parser node-sass sass-loader
$ npm install --save-dev concurrently nodemon

app/express/app.js выглядит так:

//import express from express
var express = require('express')
var app = express()
// sets port 8080 to default or unless otherwise specified in the environment
app.set('port', process.env.PORT || 8080)

var bodyParser = require('body-parser')    
app.use(bodyParser.json())

app.use(express.static(`${__dirname}/../dist/`))

// Test: curl -X POST -H "Content-Type: application/json" -d '{"path": "bla/blub.txt"}' http://localhost:8081/api/save
app.post('/api/save', function (req, res) {
    response = {
        msg: 'okay',
        data: Math.floor(Math.random() * 10)
    };
    res.end(JSON.stringify(response))
})

var server = app.listen(app.get('port'), function () {
    var host = server.address().address
    var port = server.address().port
    console.log("Example app listening at http://%s:%s", host, port)
})

Я изменил шаблонный код, сгенерированный vue init webpack, так что app/components/HelloWorld.vue:

<template>
    <div>
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
import Axios from 'axios'
const baseUrl = "http://127.0.0.1:8080/api"
export default {
    name: 'HelloWorld',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    },
    async created() {
        this.msg = await Axios.post(`${baseUrl}/save`, {"path": "bla/blub.txt"})
            .then(response => new Promise(resolve => {
                let msg = response.data.msg
                resolve(msg)
            }))
            .catch(error => {
                console.log(error)
                Promise.reject(error)
            })
    }
}
</script>

<style lang="scss" scoped>
h1 {
  font-weight: normal;
}
</style>

Чтобы начать разработку одной командой (npm start go) и разрешить горячую перезагрузку, я изменил app/package.json (не знаю, откуда я это скопировал):

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "apiserver": "PORT=8081 nodemon express/app.js",
    "go": "concurrently --kill-others \"npm run dev\" \"npm run apiserver\"",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

Чтобы запустить версию приложения, я запустил:

$ npm run dev   # webpack-dev-server starts on port 8080, express on 8081

Чтобы избежать CORS-проблем, веб-пакет может быть настроен для прокси-экспресс-запросов. Изменить app/config/index.js:

proxyTable: {
'/api':{
    target: 'http://localhost:8081',
    changeOrigin: true,
 }
},

Теперь можно снова запустить npm run dev из app/, все работает нормально.

Следовательно, переходим к производственному режиму. Я бегу

$ npm run build
$ node express/app.js

Все отлично работает.

(Со временем я добавил найденные мной ответы на этот вопрос ... Первоначальный вопрос был: «Настроить веб-пакет для vue-интерфейса и экспресс-бэкенда (сценарий как производство, так и разработка)»)

Мой вопрос сейчас:

Как изменить настройку Babel Webpack таким образом, чтобы node -run-файл app.js использовал ECMA2016 (такой, чтобы вместо require ... можно было использовать import express from express)?

Спасибо за любую помощь!