Как это совместить?(Webpack, Typescript, ESlint, Babel)

Question

Я хочу настроить веб-пакет для проверки файлов eslint.Затем скомпилированная машинопись.Затем он трансформировал бабеллу.

Мне стыдно задавать такой вопрос по теме, которая полна ответов в Интернете.Но я пытаюсь объединить различные конфигурации из других ответов уже 5 дней.Я использовал глоток раньше и никогда не веб-пакет.Но теперь мне нужно сделать это.

Показать все варианты того, что я пробовал, невозможно.Я покажу последний вариант, в котором машинопись работает.Но используя функцию с неправильным типом, я не получаю сообщение об ошибке.Я даже не мечтал о подключении babel.

main.ts

function getName(k: string): string {
  return 'my name is' + k;
}

console.log(getName());
// no error compiling!

.babelrc

{
  "presets": [
    "@babel/preset-typescript",
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ]
}

.eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',  // Specifies the ESLint parser
  plugins: [
    "@typescript-eslint"
  ],
  extends: [
    "plugin:@typescript-eslint/recommended"
  ],
  rules: {
    "indent": "off",
    "@typescript-eslint/indent": ["error", 2]
  },
  parserOptions: {
    ecmaVersion: 2018,  // Allows for the parsing of modern ECMAScript features
    sourceType: 'module',  // Allows for the use of imports
  },
};

webpack.config.js

'use strict';

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const path = require('path');

module.exports = {
  // mode: 'production',
  mode: 'development',
  context: path.resolve(__dirname, 'src'),
  // devtool: 'source-map',
  entry: {
    app: [
      './main.ts'
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist/assets'),
    filename: 'js/[name].[contenthash:8].js',
    publicPath: '/',
    chunkFilename: 'js/[name].[contenthash:8].js'
  },
  resolve: {
    // alias: {
    //   '@': path.resolve(__dirname, 'src'),
    // },
    extensions: ['.tsx', '.ts', '.js', 'vue']
  },
  module: {
    // noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
    rules: [
      {
        enforce: 'pre',
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'eslint-loader',
            options: {
              emitError: true,
              emitWarning: true,
              extensions: [
                '.js',
                '.jsx',
                '.vue',
                '.ts',
                '.tsx'
              ]
            }
          }
        ]
      },
      {
        test: /\.ts$/,
        use: [
          // {
          //   loader: 'babel-loader'
          // },
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
              // appendTsSuffixTo: [
              //   '\\.vue$'
              // ],
              // happyPackMode: true
            }
          }
        ],
        exclude: /node_modules/,
      },
      // {
      //   test: /\.vue$/,
      //   use: ['vue-loader'],
      //   exclude: /node_modules/,
      // }
    ]
  },
  plugins: [
    // new VueLoaderPlugin()
  ]
};