Webpack config for Vue + TypeScript

webpack.base.js

const util = require('./util');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    main: util.resolve('src', 'main.ts'),
  },
  output: {
    filename: '[name].bundle.js',
    path: util.resolve('dist'),
  },
  module: {
    rules: [{
      test: /\.(ts|tsx)$/,
      enforce: 'pre',
      use: [{
        loader: 'tslint-loader',
        options: {
          typeCheck: true,
        },
      }],
      exclude: /node_modules/,
    }, {
      test: /\.vue$/,
      use: [
        'vue-loader',
      ],
    }, {
      test: /\.(ts|tsx)$/,
      use: [{
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [
            /\.vue$/,
          ],
        },
      }],
      exclude: /node_modules/,
    }, {
      test: /\.(sass|scss)$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader',
      ],
    }, {
      test: /\.(png|jpg|jpeg|gif|svg|webp)$/,
      loader: 'url-loader',
      options: {
        limit: 16384,
        name: 'static/img/[name].[hash:7].[ext]',
      },
    }, {
      test: /\.(mp3|mp4|webm|ogg|wav|flac|aac)$/,
      loader: 'url-loader',
      options: {
        limit: 16384,
        name: 'static/media/[name].[hash:7].[ext]',
      },
    }, {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      loader: 'url-loader',
      options: {
        limit: 16384,
        name: 'static/fonts/[name].[hash:7].[ext]',
      },
    }],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: util.resolve('src', 'index.html'),
    }),
  ],
  resolve: {
    extensions: [ '.ts', '.js', '.vue', '.json' ],
  },
};