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

柔情只为你懂 2022-09-07 14:43 250阅读 0赞

## Webpack -> Vite ##

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

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

安装`wp2vite`

npm install -g wp2vite

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

cd yourProjectRootPath

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

wp2vite --config=./webpack.config.js // 传递配置文件

执行以后：

![6603bd002739bd96c1f8977ef7302775.png][]

安装新的vite所需依赖：

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`

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

npm i ykj-cli -g 
    ykj init App（选择通用项目模板）
    cd /App
    yarn 
    yarn dev

创作不易，**加个****点赞、在看**** **支持一下哦！

往期推荐

[![4dd3e84296a2732e5a9823c99a440d88.png][]][4dd3e84296a2732e5a9823c99a440d88.png 1]

[Vite 太快了，烦死了，是时候该小睡一会了。][4dd3e84296a2732e5a9823c99a440d88.png 1]

[![d2b1a881571cb727fc0cd52b4a2528c1.png][]][d2b1a881571cb727fc0cd52b4a2528c1.png 1]

[如何实现比 setTimeout 快 80 倍的定时器？][d2b1a881571cb727fc0cd52b4a2528c1.png 1]

[![a2732a4e862dda6a27a1be87b8b83240.png][]][a2732a4e862dda6a27a1be87b8b83240.png 1]

[万字长文！总结Vue 性能优化方式及原理][a2732a4e862dda6a27a1be87b8b83240.png 1]

[![1ec932bea16c5483a7e2f45f08acd94b.png][]][1ec932bea16c5483a7e2f45f08acd94b.png 1]

[90 行代码的 webpack，你确定不学吗？][1ec932bea16c5483a7e2f45f08acd94b.png 1]

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1.  点个「**在看**」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -\_-）
2.  欢迎加我微信「huab119」拉你进技术群，长期交流学习...
    
    关注公众号「**前端劝退师**」，持续为你推送精选好文，也可以加我为好友，随时聊骚。
3.

![1c69aad8a9d9c0d293fd604b69a29cd9.png][]

点个在看支持我吧，转发就更好了

[6603bd002739bd96c1f8977ef7302775.png]: /images/20220829/e3eeb9e848fd41d88b0c117e2f70e120.png
[4dd3e84296a2732e5a9823c99a440d88.png]: /images/20220829/5d0bb9314bc5481f88a93143afd586eb.png
[4dd3e84296a2732e5a9823c99a440d88.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c24fb1deb5c6a70410889666afec7da71e77e5ab4b17b7677a22a554fdc9ee2f3d97006322&idx=1&mid=2247487534&scene=21&sn=947df5483ab7508f8d2f9abd8c2f11a8#wechat_redirect
[d2b1a881571cb727fc0cd52b4a2528c1.png]: /images/20220829/fffd0f845a8b4fcaa111b8a3e7bb94fe.png
[d2b1a881571cb727fc0cd52b4a2528c1.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c25151deb5d847686e17e267e9659124dd4250f9df681564ce87a55190625bfd49adc02661&idx=1&mid=2247487182&scene=21&sn=ae83a65d4e6a9ee8b3b98a4cbe20c96b#wechat_redirect
[a2732a4e862dda6a27a1be87b8b83240.png]: /images/20220829/53675885c6bd4c92942e83895343c5f9.png
[a2732a4e862dda6a27a1be87b8b83240.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c251e2deb5d8f455c581ddaf84a503c912d4bc2def725105fdf7442af6df6c6af0dee01b7b&idx=1&mid=2247487101&scene=21&sn=92c60dd47cf94731829bf006cd2b5e36#wechat_redirect
[1ec932bea16c5483a7e2f45f08acd94b.png]: /images/20220829/50431c74f4fe46f99fc7c2c6b0a77395.png
[1ec932bea16c5483a7e2f45f08acd94b.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c24f0adeb5c61c4c64564fa3ef07fae165e0ba9c115c5846db1a94cd97f5f101e764c9b604&idx=1&mid=2247487637&scene=21&sn=bb353093eee2f07cfcfc7e4ad460ce7f#wechat_redirect
[1c69aad8a9d9c0d293fd604b69a29cd9.png]: /images/20220829/7eca6fc461314e7b8cff98302fdec7d8.png