如何配置webpack5的asset资源模块解决生成URL带../../相对路径问题

问题原因 #

出现../../前缀是因为没有显式配置publicPath时，webpack默认使用相对路径计算资源地址：你的打包后JS文件存放在static/js/目录下，从JS目录出发寻址static/images/下的图片资源，就会自动生成向上跳转两层的相对路径前缀。

解决方法 #

• 方法1：全局配置publicPath
  在output配置中添加publicPath项，所有资源都会以站点根目录为基准生成绝对路径：

output: {
 path: path.resolve(__dirname, './build'),
 assetModuleFilename: 'static/images/[name][ext]',
 publicPath: '/', // 生产环境若有二级部署路径可修改为对应路径，例如'/my-app/'
 clean: true,
},

• 方法2：仅针对图片资源单独配置publicPath
  如果不需要修改全局publicPath，可在图片的asset规则中单独指定资源的基准路径：

{
  test: /\.(png|jpe?g|gif)$/i,
  type: 'asset/resource',
  generator: {
    publicPath: '/'
  }
}

• 方法3：调整资源输出层级避免相对路径跳转
  如果不想使用绝对路径，可以调整JS文件的输出目录，让JS和图片资源的父层级保持一致，例如将JS输出路径设置为static/[name].js，相对路径就无需向上跳转层级。

内容的提问来源于stack exchange，提问作者Rodrigo Lira