前端构建变更：从 webpack 换 vite

本文介绍: 前端构建变更，从 webpack 换到 vite，加深对构建工具的理解

这里以一个 op （内部运营管理用）项目为例，从 webpack 构建改为 vite 构建，提高本地开发效率，顺便也加深对 webpack 、 vite 的了解。

vite 是前端构建工具，使用一系列预配置进行rollup 打包，还包括了一个开发服务器。

webpack 不只是打包工具，除了把文件打包在一起，还做了比如接入 babel 做降级处理使得在旧浏览器也能用 js 新特性、 ts 转 js 、打包 css、压缩 js 、压缩 css 等工作（这些 vite 借助 rollup 插件似乎也能实现? )；webpack 还有开发服务器，支持 hmr（vite 也支持）

新版浏览器是默认支持 ts 、支持 es module 的，这使得在本地开发时不需要打包也能跑项目。
如下图所示，浏览器是直接请求 ts 资源的
在这里插入图片描述

返回的文件也是 es module 格式的。
这样就省去了打包步骤，这是 vite 本地开发快的重要原因。
同时
1.Vite 使用 Esbuild 预构建依赖（commonjs 、 umd 转 esm，把多文件依赖打包为一个模块https://vitejs.cn/vite3-cn/guide/dep-pre-bundling.html），Esbuild 使用 Go 语言编写，比以 Node.js 编写的打包器预构建依赖快 10-100 倍。
2.vite 可以依赖浏览器缓存、 http 缓存策略缓存未变更的文件加快速度
先看项目现状，项目是 webpack 构建的，用了 ssr 。

在这里插入图片描述
浏览器发起请求，本地开发用 chrome 的SwitchyOmega插件配置规则把请求转发到 whistle，whistle 配置规则把这些请求到转发到本地的 3101 端口，3101就是nest 服务器启动服务监听的端口。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 处理 vue spa
import path from 'node:path';
import commonjs from 'vite-plugin-commonjs';// commonjs转 es module
import packageJson from './package.json';

export const resolve = (dir: string): string => path.resolve(__dirname, dir);

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [commonjs(), vue()],
  resolve: {
    alias: [ // 别名
      { find: /@/(.*)/, replacement: '/web/$1' },
      { find: /~/(.*)/, replacement: '../$1' },
      { find: /@shared/(.*)/, replacement: '/../shared/src/$1' },
    ],
  },
  define: { // 常量定义
    __isBrowser__: true,
    process: {
      env: {
        version: packageJson.version, // 读取 package.json 版本号
      },
    },
  },
  server: {
    port: 8101, // vite端口
  },
  build: {
    outDir: 'build/client', // 输出目录
    manifest: true,
  },
  // base: '/xxx', // 静态资源前缀，build 时才需要，打包出来的资源引用时会带上这个路径
});