如何配置 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,
},
...