TypeScript, VueJS and JSX webpack configuration

.babelrc

{
  "presets": [],
  "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs"]
}

bash

npm i -S \
@types/core-js \
vue \
typescript \
ts-loader \
webpack \
babel \
babel-core \
babel-loader \
babel-plugin-syntax-jsx \
babel-plugin-transform-es2015-modules-commonjs \
babel-plugin-transform-vue-jsx \
babel-helper-vue-jsx-merge-props

tsconfig.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "bin/",
    "sourceMap": true,
    "removeComments": true,
    "target": "es5"
  },
  "include": [
    "src/**/*"
  ],
  "files": [
    "src/app.tsx"
  ]
}

webpack.config.js

module.exports = {
  entry: "./src/app.tsx",
  output: {
    filename: "bin/bundle.js"
  },
  resolve: {
    // Add '.ts' and '.tsx' as a resolvable extension.
    extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
  },
  module: {
    loaders: [
      // It's important to run 'babel' first this will avoid a compilation error
      { test: /\.tsx?$/, loader: "babel" },
      // Run ts loader to transform our typescript into JS
      { test: /\.tsx?$/, loader: "ts-loader" }
    ]
  },
  // If you want to load 'vue' as an external, and not include it in your bundle
  // simply add it to the array.
  externals : []
};

It should be noted, that even though webpack will take in the entry point and the application will compile without errors, linting the code will throw warnings about the --jsx flag missing unless the entry point is supplied in the tsconfig.json.