一、依赖安装

1. 创建项目

创建项目文件夹webpack-vue。

mkdir webpack-vue
cd webpack-vue

2. 安装依赖

初始化并安装依赖。（为了方便查看，下述命令手动进行了换行）

pnpm init
tsc --init

pnpm i webpack webpack-cli vue-loader@next @vue/compiler-sfc ts-loader typescript 
css-loader vue-style-loader webpack-dev-server html-webpack-plugin 
@types/node path @types/webpack-dev-server ts-node -D
pnpm i vue -S

二、配置文件

1. 在根目录下创建并配置webpack.config.ts

对webpack进行一些简单的配置，如有需要，自行更改。

import { VueLoaderPlugin } from 'vue-loader';
import { Configuration } from 'webpack';
import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
import HTMLWebpackPlugin from 'html-webpack-plugin';

const config: WebpackConfiguration = {
  mode: 'development',
  entry: './src/main.ts',
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /.ts$/,
        loader: 'ts-loader',
        options: {
          // 允许 ts-loader 处理 .vue 文件中的 <script lang="ts">
          appendTsSuffixTo: [/.vue$/]
        }
      },
      {
        test: /.css$/,
        use: ['vue-style-loader', 'css-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json']
  },
  plugins: [
    new VueLoaderPlugin(),
    new HTMLWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
      title: 'Vue 3 + TypeScript'
    })
  ],
  devServer: {
    port: 10537,
    open: true,
    liveReload: false
  }
};

export interface WebpackConfiguration extends Configuration {
  devServer?: WebpackDevServerConfiguration;
}

export default config;

2. 配置tsconfig.json

对tsconfig进行配置后才能支持webpack.config.ts，具体见关于webpack.config.ts的描述。这里列出基础的配置：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*", "webpack.config.ts"],
  "exclude": ["node_modules", "dist"]
}

3. 在src目录下配置vue文件的类型

在src目录下创建shim-vue.d.ts文件，内容如下：

declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

三、🥧 两种在webpack中建立静态资源服务的方案

1. 通过static配置项

在static中directory指向静态资源的目录，publicPath设置静态资源访问路径。

2. 通过setupMiddlewares配置项

在setupMiddlewares中可以配置中间件（如express）。下列例子通过express.static来配置静态资源服务。

const config = {
  ...,
  devServer: {
    port: 10537,
    open: false,
    liveReload: false,
    static: {
      directory: resolve(__dirname, 'assets'),
      publicPath: '/assets'
    },
    setupMiddlewares(middlewares, { app }) {
      if (!app) throw new TypeError('app is not defined');
      app.use('/public', express.static(resolve(__dirname, 'assets')));
      return middlewares;
    }
  }
}