如何配置 webpack 的资产资源模块，使 url 不奇怪？

Question

我正在 webpack 5 上试用新的资产模块。

我是这样设置的：

output: {
 path: path.resolve(__dirname, './build'),
 assetModuleFilename: 'static/images/[name][ext]',
 clean: true,
},
...
module: {
 rules: [
   ...
   {
     test: /\.(png|jpe?g|gif)$/i,
     type: 'asset/resource',
   },

这是代码：

import imageUrl from './background.jpg';

const styles = {
  backgroundImage: `url(${imageUrl})`,
};

当我运行代码时，这是我得到的：

<div style="background-image: url("http://localhost:3000/static/js/../../static/images/planning.jpg");">
</div>

有没有办法摆脱这个../../？

Answer 1

后来我意识到生成的路径以“..static/js”开头，这不是资产模块的url。

这让我陷入了真正的问题，解决方案是将 publicPath 添加到 webpack 的输出配置中：

...
output: {
  path: path.resolve(__dirname, 'build'),
  publicPath: '/',
  assetModuleFilename: 'static/images/[name][ext]',
  clean: true,
},
...

如何配置 webpack 的资产资源模块，使 url 不奇怪？

How do I configure webpack's asset resource module so that url isn't weird?

webpack

webpack-5