f2elab / webpack-to-vite

为webpack项目提供一键接入Vite的启动

webpack-vite-serve

为webpack项目提供一键接入Vite的能力

相关文章：webpack项目接入Vite的通用方案介绍

包管理工具推荐使用pnpm

npm i -g pnpm

Usage

Installed

npm install webpack-vite-serve -D
# or
yarn add webpack-vite-serve -D
# or
pnpm add webpack-vite-serve -D

Command Run

# devServer
wvs start [options]

{
  "scripts": {
    "vite:vue": "wvs start -f vue",
    "vite:react": "wvs start -f react",
    "vite": "wvs start"
  }
}

# build
wvs build [options]

{
  "scripts": {
    "build:vite": "wvs build",
  }
}

Options

• -f,--framework <type>：指定使用的业务框架 (vue，react)
  • 此选项将会自动引入框架依赖的插件，react-@vitejs/plugin-react，vu3-@vitejs/plugin-vue，vue2-vite-plugin-vue2
  • 用户可以不开启此选项，自行在用户配置中加入对应的插件
• -s,--spa：按照单页应用目录结构处理 src/${entryJs}
  • 不指定 -s或-m，默认按单页应用
• -m,--mpa：按照多页应用目录结构处理 src/pages/${entryName}/${entryJs}
• -d,--debug [feat]：打印debug信息
• -w,--wp2vite：use wp2vite 自动转换webpack文件
• -c,--config: 手动指定vite配置路径
• -w,--webpack: 手动指定webpack配置路径

其中entryJs匹配命名规则/(index|main)\.[jt]sx?$/

Agreement

工程目录约定

SPA

Pages Dir	Html Template	Entry Js
src	public/index.html	src/${entryJs}

* public
  * index.html
* src
  * main.ts

MPA

Pages Dir	Html Template	Entry Js
src/pages	src/pages/${pageName}/${pageName}.html	src/pages/${entryName}/${entryJs}
	src/pages/${pageName}/index.html	-
	public/index.html	-

* public
  * index.html
* src
  * pages
    * pageName1
      * main.js
      * pageName.html
    * pageName2
      * index.ts
      * index.html

Supports

• Vue
• React
• SPA - 单页应用
• MPA - 多页应用
• build for production - 打包wvs build
• merge userConfig - 自动合并工程根目录的vite.config.ts文件
• config transform use wp2vite - webpack配置转换 !!! 存在一些小小问题，准备PR解决
• export inline plugin - 对外暴露内置的插件，供单独使用，如处理htmlTemplate与entryJs的能力

Demos

• JS
  • Vue2 SPA
  • React SPA
  • Vue MPA
  • React MPA
• TS
  • Vue3 SPA
  • React SPA
  • Vue MPA
  • React MPA

Run Examples

pnpm install

# 1
cd examples

# 2
cd js

# 3
cd react-mpa

# 4
# run webpack devServer
npm run dev
# 5
# run vite devServer
npm run dev:vite

Local

Dev

使用pnpm

npm i -g pnpm

安装依赖

pnpm install

编译

pnpm dev

激活指令（全局）

npm link

测试指令

wvs hello

Build

使用pnpm

npm i -g pnpm

安装依赖

pnpm install

构建

pnpm build
# or
pnpm dev