[Feature]: hope the bundled output filename and the path injected into the CSS are different

[WuYunlong]

What problem does this feature solve?

比如我现在配置

output: {
     assetModuleFilename: {
        filename: 'apps/desk/img/[name].[contenthash:6].[ext]'
    }
}

我想在css中使用的静态文件保持 background("img/[name].[contenthash:6].[ext]") 此时我要如何进行配置？或者说这样的需求如何才能满足

What does the proposed API of configuration look like?

有没有可能增加配置

output: {
     assetModuleFilename: {
        filename: 'apps/desk/img/[name].[contenthash:6].[ext]',
        injectname: 'img/[name].[contenthash:6].[ext]'
    }
}

[hardfist]

maybe you could use other subsititution

output: {
     assetModuleFilename: {
        filename: 'apps/desk/img/[my_name].[my_contenthash:6].[ext]'
    }
}

[WuYunlong]

也许你可以用其他替代品

output: {
     assetModuleFilename: {
        filename: 'apps/desk/img/[my_name].[my_contenthash:6].[ext]'
    }
}

这样的配置无法满足我的需求，因为目前我是打包多个html页面 html我通过插件移动到了相应的位置 js 和 css我同样通过 html hook 进行了调整 但是在css中引入的图片无法用合适的方式来进行移动 我的打包目录结构如下

dist
    app01
       index.html
       index.****.js
       index.****.css
    app02
      index.html
      index.****.js
      index.****.css

我现在是想每个子目录单独进行发布 相互不想有任何影响 所以我的需求是： 把 app01 中使用的所有静态资源都移动到 app01 目录下面 把 app02 中使用的所有静态资源都移动到 app02 目录下面 没有找到合适的方法。

[hardfist]

不是很理解，或许你可以提供个demo帮助理解

[beiifeng]

才做过一个这样的需求，希望对你有帮助

{
  test: /\.(eot|svg|ttf|woff|woff2|png|jpe?g|gif)$/i,
  type: 'asset',
  include: /assets/,
  exclude: /assets[/\\]inline/,
  generator: {
    publicPath: "/",
  },
}

[WuYunlong]

不是很理解，或许你可以提供个demo帮助理解

我代码上传了 https://github.com/WuYunlong/rspack

我现在就是build 的时候 我想把 apps/desk/index.vue css 使用的图片打包到 widget/apps/desk/img/****.png

clone 代码之后

pnpm install
pnpm build

查看打包文件 。目前图片是打包到了 widget/asset 下

因为最终项目需要使用file协议运行 而且打包出来的 apps/*** 相互不想有任何影响

[WuYunlong]

才做过一个这样的需求，希望对你有帮助

{
  test: /\.(eot|svg|ttf|woff|woff2|png|jpe?g|gif)$/i,
  type: 'asset',
  include: /assets/,
  exclude: /assets[/\\]inline/,
  generator: {
    publicPath: "/",
  },
}

这样的配置貌似无法满足我的需求 publicPath 是改变引入的地址 我的项目因为是多个页面的项目 所以这样可能无法满足

我代码提交了 https://github.com/WuYunlong/rspack 如果您有时间方便帮忙看一下

[WuYunlong]

maybe you could use other subsititution

output: {
     assetModuleFilename: {
        filename: 'apps/desk/img/[my_name].[my_contenthash:6].[ext]'
    }
}

这样进行配置 确实文件生成的位置正确 但是在 css中引用的路径也是 background: url("apps/desk/img/[my_name].[my_contenthash:6].[ext]") 我想要的结果是 文件生成到 apps/desk/img/[my_name].[my_contenthash:6].[ext] 但是css里面使用的路径是 background: url("./img/[my_name].[my_contenthash:6].[ext]")

[beiifeng]

试了 outputPath ,但是好像不支持。

{
  test: /\.(png|jpg|jpeg|gif)/,
  type: 'asset/resource',
  generator: {
    publicPath: './',
    filename: () => {
      return 'img/[name].[contenthash:6][ext]'
    },
    outputPath: /** @param {{filename: string}}*/ ({ filename }) => {
      return filename.split('/').slice(1, 3).join('/')
    }
  }
}

@hardfist 不知道是否有计划加入 generator.outputPath api. 不知道加入这个api后能否解决这个问题。