Vite控制结构打包

899 阅读1分钟

一、vite的打包的疑惑

我们的项目在用vite打包时会发现所有的资源都在dist目录下的assets文件夹下,这个时候我们在想问什么不可以css文件在一个css文件夹,js在一个js文件夹下,图片之类都在img文件夹下呢?

image.png

二、vite的打包原理

我们去vite的官方文档去找答案,发现vite的底层还是rollup的打包配置。

image.png 然后我们再去rollup的官方文档,看output这个能控制输出的这一块,发现会有控制入口文件的打包配置,有文件类型,hash name

image.png 于是我们的vite.config.js可以写成这样

image.png 再次打包 发现结果并不是我预期的样子,配置的js不在js文件夹中,css也还是在asstes目录下,再次看文档发现有打包过程没注意到,这个chunk配置没写,chunk可以看文档就是一个打包分包的过程,

image.png

image.png

image.png

image.png 我们可以看到output.assetFileNames的ytpe是个函数返回的string,于是我们可以自己写个函数来返回string,打印看一下打包的过程参数

image.png

image.png

最终代码可以写成: image.png