自己搭建webpac脚手架

在使用Webpack时，需要安装一些必要的依赖项。 配合 webpack 使用

npm install webpack ts-loader typescript webpack-cli --save-dev
在package.json文件中，为scripts部分添加 "start": "webpack"，以方便启动Webpack。

// Vue配置
// 首先，安装与Vue相关的依赖。
npm i vue@next --save
npm i -D @vue/compiler-sfc
// 接下来，安装Vue的loader以及其他必要的Webpack插件。
npm i vue-loader --save-dev
npm i webpack-dev-server html-webpack-plugin --save-dev

Webpack配置文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 使用Webpack的HtmlWebpackPlugin插件
const { VueLoaderPlugin } = require('vue-loader');  // 引入VueLoader插件

module.exports = {
  entry: {
    index: './src/main.ts',  // 指定入口文件
  },
  mode: 'development',  // 开发模式
  module: {
    rules: [
      {
        test: /\.tsx?$/,  // 处理.ts和.tsx文件
        loader: 'ts-loader',  // 使用ts-loader编译
        options: {
          appendTsSuffixTo: [/\.vue$/],
        },
        exclude: /node_modules/,  // 排除node_modules文件夹
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',  // 使用vue-loader处理.vue文件
      }
    ]
  },
  resolve: {
    extensions: ['.tsc', '.ts', '.js'],  // 指定Webpack解析哪些扩展名的文件
  },
  output: {
    filename: 'bundle.[name].js',  // 输出文件名
    path: path.resolve(__dirname, 'dist'),  // 输出目录
  },
  devServer: {
    // contentBase: path.resolve(__dirname, 'dist'),
    // contentBase: './dist',
    // port: 3020,
    // hot: "only",
    // static: false,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'index.html')  // 指定模板文件
    }),
    new VueLoaderPlugin(),  // 使用VueLoader插件
  ]
}

备注

1. 为了使Webpack能够处理Vue组件，需要使用vue-loader。
2. 使用HtmlWebpackPlugin可以简化HTML文件的创建，为您的bundle提供服务。
3. 通过VueLoaderPlugin，可以将定义过的其他规则应用到.vue文件中。
4. 请确保已经正确配置了tsconfig.json文件，以便ts-loader可以正确地编译TypeScript代码。