vite分目录打包及去掉默认的.gz 文件的操作方法
作者：vivk2017
Vite在默认配置下会将资源打包至assets文件夹并添加哈希值,不同于Webpack的多文件夹存放方式,Vite只对public文件夹不进行打包处理,而Webpack不打包public和static文件夹,本文介绍vite分目录打包及去掉默认的.gz 文件的操作方法,感兴趣的朋友一起看看吧
1.vite打包情况介绍：
1.1vite在不进行任何配置的情况下，会将除开public的所有引用到资源打包编译添加哈希值至assets文件夹中（非引用文件以及行内样式图片未被打包编译资源会被treeSharp直接忽略不打包），
1.2webpack与vite打包区别：
1.2.1vite会将所有JS、CSS等文件都统一存放在assets中，不同于webpack会将会自动生成js、css、img文件夹进行分开存放。
1.2.2vite只会对public文件夹进行不打包处理，public文件夹内所有文件会移至dist中，webpack会将public和static文件进行不打包处理，存放至dist中
2.需求：vite根据不同的资源打包时分开文件夹存放
2.1在vite.config.js中配置vite打包参数（不对public文件夹资源进行任何操作）
build: {
outDir: 'dist',
// assetsDir: 'public', // 静态资源目录
rollupOptions: {
output: {
chunkFileNames: 'public/js/[name]-[hash].js',
entryFileNames: 'public/js/[name]-[hash].js',
assetFileNames: (assetInfo) => {
if (/\.(png|svg|jpg|jpeg|gif|ttf)$/.test(assetInfo.name)) { // 匹配资源文件后缀
return `public/img/[name]-[hash].[ext]`; // 创建media文件夹存放匹配的资源文件,name为该文件的原名，hash为哈希值，ext为文件后缀名，以[name].[hash][ext]命名规则
}
return `public/css/[name]-[hash].[ext]`; // 不匹配的资源文件存放至assets，以[name]-[hash].[ext]命名规则，注意两处的命名规则不同
},
}
}
},`在这里插入代码片`export default {
// ...其他配置
build: {
rollupOptions: {
output: {
assetFileNames: (assetInfo) => {
if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)$/.test(assetInfo.name)) { // 匹配资源文件后缀
return `media/[name].[hash][ext]`; // 创建media文件夹存放匹配的资源文件,name为该文件的原名，hash为哈希值，ext为文件后缀名，以[name].[hash][ext]命名规则
}
return `assets/[name]-[hash].[ext]`; // 不匹配的资源文件存放至assets，以[name]-[hash].[ext]命名规则，注意两处的命名规则不同
},
},
},
},
// ...其他配置
}; 2.2 打包后资源生成命名规则不同的区别：
2.2.1图片、JS等资源文件可通过media/[name].[hash][ext]命名规则获取资源
2.2.1css文件不可使用上述规则，必须使用assets默认的命名规则，assets/[name]-[hash].[ext]，否则无法获取该文件
到此这篇关于vite分目录打包以及去掉默认的.gz 文件的文章就介绍到这了,更多相关vite分目录打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！