打包目录结构
最开始打包多页面生成的dist 多个页面 但是资源会放到assets文件中所有的图片资源
开发时候的目录
![在这里插入图片描述](https://img-blog.csdnimg.cn/7da225902a904477b364a7ec97a8512b.png
这是页面目录
![在这里插入图片描述](https://img-blog.csdnimg.cn/c115ef91c61e4d3eba47cae1724940c9.png
这里是图片资源 文件名跟多页面的目录是一样的
这里想打包的时候每个对应的页面的资源打包到自己的文件里去
也就是页面1的资源放到1的文件中 跟js,html文件放在同一个文件中 不是把所有的资源放到一个assets文件中
这里就要修改webpack的打包处理
修改webpack.base.js 文件
module下的rulse修改一下
filename 可以写函数返回值 拿到当前匹配的图片的当前路径
path.dirname(pathData.filename) 这是拿到了资源的前面全路径 再分割开拿到最后一个 就是你资源的文件名
module: {
rules: [
{
test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
type: 'asset/resource',
generator: {
filename: (pathData) => {
const filepath = path.dirname(pathData.filename)
.split('/')
return filepath[filepath.indexOf('task') + 1] + '/images/[hash][ext][query]'
}
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: (pathData) => {
const filepath = path.dirname(pathData.filename)
.split('/')
return filepath[filepath.indexOf('task') + 1] + '/font/[hash][ext][query]'
}
}
},
]
}
// filepath[filepath.indexOf('task') + 1] 是我拿到的文件名字 然后 font 或者 images也是个文件 都是自动创建的文件 hash ext query 都是用来给资源文件起的名称以防有相同的名称
这样打包的时候资源文件就可以动态的打包到对应的文件里面去
这种做法是为了每个页面资源都在自己的文件里 可以单独下载文件