wabpack 打包资源动态分配地址 获取当前资源文件夹名称

打包目录结构

最开始打包多页面生成的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 都是用来给资源文件起的名称以防有相同的名称

这样打包的时候资源文件就可以动态的打包到对应的文件里面去
这种做法是为了每个页面资源都在自己的文件里 可以单独下载文件