Webpack多页面项目：CSS打包后相对路径../变为/的问题求助

嘿，我之前搭建多页面项目时也踩过这个坑！你的问题核心其实是CSS文件和HTML文件的目录层级不同，导致两者需要的资源相对路径不一样：

• HTML文件在dist/根目录，所以直接用assets/images/xxx.png就能找到图片
• 但CSS文件存在dist/css/目录下，得用../assets/images/xxx.png才能定位到assets文件夹，可你当前的配置给所有资源都用了根目录的路径，自然就找不到了

最快的解决方法：给ExtractTextPlugin加个publicPath #

你只需要在提取CSS的配置里，新增一行publicPath: "../"，这个参数是专门用来修正提取后CSS里的资源路径的：

{
  test: /\.css$/,
  use: extractCSS.extract({
    fallback: "style-loader",
    use: [
      { loader: "css-loader", options: { minimize: true, sourceMap: true } },
      "postcss-loader"
    ],
    // 新增这行，给CSS里的资源加上上层目录的相对路径
    publicPath: "../"
  })
}

原理很简单：extract-text-webpack-plugin的publicPath会覆盖file-loader的publicPath设置，专门给CSS文件里的资源生成正确的相对路径。这样CSS里的图片路径就会从assets/images/xxx.png变成../assets/images/xxx.png，完美匹配CSS所在的css/目录层级，而HTML里的图片路径还是保持原来正确的assets/images/xxx.png。

更灵活的方案：根据引用者动态设置路径 #

如果你需要更精细化的控制，也可以修改file-loader的配置，让它根据引用资源的文件类型（是CSS还是HTML）返回不同的路径：

{
  test: /\.(svg|gif|jpg|png)$/,
  use: [
    {
      loader: "file-loader",
      options: {
        outputPath: "assets/images/",
        publicPath: (url, resourcePath, context) => {
          // 判断当前资源是被CSS还是HTML引用的
          const isFromCss = resourcePath.endsWith('.css');
          return isFromCss ? "../assets/images/" : "assets/images/";
        }
      }
    }
  ]
}

这个方法通过resourcePath判断引用资源的文件，给CSS和HTML分别返回对应的相对路径，也能完美解决你的问题。

验证修改效果 #

重新跑一遍webpack打包，打开dist/css/index.styles.min.css看看，里面的图片路径应该已经变成../assets/images/xxx.png了，此时页面加载CSS就能正确找到图片，HTML里的img标签路径也依然正常。

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