title: Configure webpack for vue such that backend express server is in ECMA2016
body: <p>I wrote an app using the <code>webpack</code>-boilerplate for <code>vue</code>. The backend handling <code>GET</code> and <code>POST</code> requests is an <code>express</code>-server. IDE is visual studio code.</p>
  
  <p>This is what I did:</p>
  
  <pre class="lang-shell prettyprint-override"><code>$ vue init webpack app
  $ cd app
  $ npm install
  $ npm install axios express body-parser node-sass sass-loader
  $ npm install --save-dev concurrently nodemon
  </code></pre>
  
  <p><code>app/express/app.js</code> looks like:</p>
  
  <pre class="lang-js prettyprint-override"><code>//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)
  })
  </code></pre>
  
  <p>I modified the boilerplate code generated by <code>vue init webpack</code> such that <code>app/components/HelloWorld.vue</code> is:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h1&gt;{{ msg }}&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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 =&gt; new Promise(resolve =&gt; {
                  let msg = response.data.msg
                  resolve(msg)
              }))
              .catch(error =&gt; {
                  console.log(error)
                  Promise.reject(error)
              })
      }
  }
  &lt;/script&gt;
  
  &lt;style lang="scss" scoped&gt;
  h1 {
    font-weight: normal;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>To start development in one command (<code>npm start go</code>) and allow hot reloading, I changed <code>app/package.json</code> (don't know where I copied that from):</p>
  
  <pre class="lang-js prettyprint-override"><code>  "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"
    },
  </code></pre>
  
  <p>To start the dev version of the app, I ran:</p>
  
  <pre><code>$ npm run dev   # webpack-dev-server starts on port 8080, express on 8081
  </code></pre>
  
  <p>To avoid CORS-problems, webpack can be configured to proxy express requests. Change <code>app/config/index.js</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>proxyTable: {
  '/api':{
      target: 'http://localhost:8081',
      changeOrigin: true,
   }
  },
  </code></pre>
  
  <p>One can now run <code>npm run dev</code> from <code>app/</code> again, everything works fine.</p>
  
  <p>Hence, over to production mode. I run</p>
  
  <pre><code>$ npm run build
  $ node express/app.js
  </code></pre>
  
  <p>Everything runs fine.</p>
  
  <p>(Over time, I added answers found by myself into this question... The original question was: "Configure webpack for vue frontend and express backend (scenario both production and development)")</p>
  
  <p>My question is now:</p>
  
  <p>How to change webpack babel setup such that the <code>node</code>-run file <code>app.js</code> uses ECMA2016 (such that <code>import express from express</code> can be used instead of <code>require ...</code>)?</p>
  
  <p>Thanks for any help!</p>