title: Webpack: apply `ts-loader` to Vue files only
body: <p>I'm working on a large project with a bit of Vue in it. We're starting to add TypeScript incrementally.</p>
  
  <p>We can't yet add <code>ts-loader</code> to the project, as that gives 2000+ errors. However, if we add type annotations to Vue SFCs without <code>ts-loader</code>, <code>vue-loader</code> can't process the syntax. </p>
  
  <p>My idea was to use <code>ts-loader</code> on Vue files only, but I can't get the Webpack config to work.</p>
  
  <p>I've tried multiple approaches so far, and I feel like at least one of them must work, if I can get the syntax right. Code extracts from webpack.base.conf.js:</p>
  
  <p><strong>Forcing only Vue files to be processed with include/exclude rules</strong>
  I've tried many variants of include/exclude</p>
  
  <pre><code>rules: [
    [ eslint-loader ],
    [ vue-loader ],
    {
      test: /\.ts$/,
      loader: 'ts-loader',
      options: { appendTsSuffixTo: [/\.vue$/] },
      exclude: /src/,
      include: /src\/components\/vue/,
    },
    [ babel-loader ],
    [ other standard loaders ],
  ]
  </code></pre>
  
  <p><strong>Adding <code>ts-loader</code> to <code>vue-loader</code> options</strong></p>
  
  <pre><code>vueLoaderConfig = {
    ...[existing CSS loaders],
   loader: 'ts-loader',
  };
  
  // relevant part of config object
  
  rules: [
    [ eslint-loader ],
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: vueLoaderConfig,
    },
    [ babel-loader ],
    [ other standard loaders ],
  ]
  </code></pre>
  
  <p><strong>Renaming .vue files to <code>.vue.ts</code> to target with Webpack rule</strong></p>
  
  <pre><code>rules: [
    [ eslint-loader ],
    {
      test: /\.vue\.ts$/,
      loader: 'vue-loader',
      options: vueLoaderConfig,
    },
    {
      test: /\.vue\.ts$/,
      loader: 'ts-loader',
    },
    [ babel-loader ],
    [ other standard loaders ],
  ]
  </code></pre>
  
  <hr>
  
  <p>Should any of the above configs actually work? Can you see any obvious places I'm getting the format wrong? If anyone has a totally different approach, I'd be interested in hearing that too.</p>
  
  <hr>
  
  <p>Versions:</p>
  
  <pre><code>"@babel/core": "^7.1.5",
  "babel-loader": "^8.0.4",
  "ts-loader": "^5.3.1",
  "typescript": "^3.1.6",
  "vue-loader": "^15.4.2",
  "webpack": "^4.25.1",
  </code></pre>
  
  <p>tsconfig.json</p>
  
  <pre><code>{
    "compilerOptions": {
      "allowSyntheticDefaultImports": true,
      "strict": false,
      "noEmit": true,
      "target": "es2015",
      "module": "es2015",
      "moduleResolution": "node",
      "esModuleInterop": true,
      "baseUrl": ".",
      "lib": ["es2015", "dom"],
      "paths": {
        "src/*": ["src/*"]
      }
    },
    "include": ["./src/**/*"]
  }
  </code></pre>