如何结合呢？ （Webpack，Typescript，ESlint，Babel）

Question

我想设置一个webpack来检查eslint文件。然后编译打字稿。然后他改变了通天塔。

对于在互联网上充满答案的主题提出这样的问题，我感到ham愧。但是我已经尝试将其他答案中的不同配置组合了5天。我以前用过gulp，从来没有使用过webpack。但是现在我需要这样做。

不可能显示我尝试过的所有变化。我将显示打字稿似乎起作用的最后一个选项。但是使用错误类型的函数，不会出现错误。我什至没有梦想过要通天塔。

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()
  ]
};