title: How to get Vue (vue cli 3) to properly handle GraphQL files?
body: <p>I have a new vue-cli 3 based project, which has <code>.graphql</code> files in the <code>src/</code> folder, e.g.:</p>
  
  <pre><code>#import "./track-list-fragment.graphql"
  
  query ListTracks(
    $sortBy: String
    $order: String
    $limit: Int
    $nextToken: String
  ) {
    listTracks(
      sortBy: $sortBy
      order: $order
      limit: $limit
      nextToken: $nextToken
    ) {
      items {
        ...TrackListDetails
      }
      nextToken
    }
  }
  </code></pre>
  
  <p>And when I run <code>yarn serve</code>, it's complaining about not having a loader for GraphQL:</p>
  
  <pre><code>Module parse failed: Unexpected character '#' (1:0)
  You may need an appropriate loader to handle this file type.
  &gt; #import "./track-list-fragment.graphql"
  |
  | query ListTracks(
  </code></pre>
  
  <p>But I do have my <code>vue.config.js</code> set up properly (I think):</p>
  
  <pre><code>const webpack = require('webpack');
  const path = require('path');
  
  module.exports = {
    configureWebpack: {
      resolve: {
        alias: {
          $scss: path.resolve('src/assets/styles'),
        },
      },
      plugins: [
        new webpack.LoaderOptionsPlugin({
          test: /\.graphql$/,
          loader: 'graphql-tag/loader',
        }),
      ],
    },
  };
  </code></pre>
  
  <p>How do I fix this?</p>