react：使用vite开发，用webpack打包（ vite + webpack ）

vite打包项目总感觉会有风险，但是vite做开发真的是贼快。 所以今天就是实验了一个写法，使用vite来开发调试，使用webpack来打包生产项目

创建项目

pnpx create-react-app webpack-vite-react --template typescript 

获得一个react的项目，它默认是使用webpack打包的。

所以我们需要再安装一个vite

pnpm add -D vite @vitejs/plugin-react

配置一个 vite.config.ts 文件

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

export default defineConfig({
  base: "./",
  plugins: [react()],
  resolve: {
    alias: {
      // 配置别名
      "@": resolve("src"),
    },
  },
  server: {
    host: "0.0.0.0",
    port: 3000,
    hmr: {
      overlay: true,
    },
  },
});

修改入口：vite入口index.html是在根目录下的，所以复制public下的一个文件。因为webpack和vite在识别入口时存在差异。

所以，修改复制完的index.html文件。删除其中的%PUBLIC_URL%, 并添加代码

<div id="root"></div>
<script>
  window.process = {
    env: {
      REACT_APP_ENV: 'test'
    }
  }
</script>
<script type="module" src="/src/index.tsx"></script>

至此完成。

注意指代路径%PUBLIC_URL%，会导致vite运行时报错。

项目要用typescript,使用javascript也会报错。

————————————————

参考文章 ： www.proyy.com/70789690575…