前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端黑科技:让Webpack项目一键支持Vite

前端黑科技:让Webpack项目一键支持Vite

作者头像
前端劝退师
发布2021-09-08 10:35:12
4430
发布2021-09-08 10:35:12
举报
文章被收录于专栏:前端劝退师

Webpack -> Vite

Vite 2.0发布一段时间了很多朋友由于种种原因无法尝试在项目中使用

最近我在思否看有人发的文章,一键让你的webpack支持vite

安装wp2vite

代码语言:javascript
复制
npm install -g wp2vite

安装完成后,进入你的项目根目录

代码语言:javascript
复制
cd yourProjectRootPath

进入根目录后,执行命令wp2vite --config=后面跟上你的webpack配置文件,例如:

代码语言:javascript
复制
wp2vite --config=./webpack.config.js // 传递配置文件

执行以后:

安装新的vite所需依赖:

代码语言:javascript
复制
npm i 
npm run dev

你可能还是会跑不起来,这里注意几个点:

  • 项目依赖必须是支持ESM的,建议安装package@next版本的
  • 热更新不需要之前的那些插件了,vite.config.js里面已经帮忙声明好了,可以删除
  • 一些未知问题

原理:1.读取package.json里面的依赖信息 2.读取webpack配置文件 3.转换webpack的配置为vite配置 4.输出index.html和vite.config等文件 5.增加package.json里面的vite依赖信息

源码地址:https://github.com/tnfe/wp2vite

如果你想直接使用,也可以用我的脚手架,直接生成项目:

代码语言:javascript
复制
npm i ykj-cli -g 
ykj init App(选择通用项目模板)
cd /App
yarn 
yarn dev
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-08-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端劝退师 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Webpack -> Vite
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档