0.1.2 • Published 2 years ago
webpack-vite-serve v0.1.2
webpack-vite-serve
为webpack项目提供一键接入Vite的能力
包管理工具推荐使用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 Demos
# 1
cd demos
# 2
cd js
# 3
cd demoProject
# 4 推荐pnpm
yarn install
# or
npm install
# or
pnpm install
# 5
# run webpack devServer
npm run dev
# 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
0.1.1-beta.2
2 years ago
0.1.1-beta.1
2 years ago
0.1.1-beta.0
2 years ago
0.1.1-beta.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.0.14-beta.0
2 years ago
0.0.10
2 years ago
0.0.11
2 years ago
0.0.12
2 years ago
0.0.13
2 years ago
0.1.0
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
3 years ago
0.0.5
3 years ago
0.0.6
3 years ago
0.0.3
3 years ago
0.0.4
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago