如何修复 webpack resolve-url-loader 不工作？答案

【问题标题】：How to fix webpack resolve-url-loader not working?如何修复 webpack resolve-url-loader 不工作？
【发布时间】：2019-10-31 11:31:07
【问题描述】：

Resolve-url-loader 没有解析我的 css 文件中的 images/fonts。 我的文件夹结构如下：

src 
   public
      images
           -banner-bg.jpg
      stylesheets
         css
           -basic.css with background: url(../../images/banner-bg.jpg)
         scss
           -main.scss with @import "../css/basic.css";

输出文件夹：

dist
  public
     images
           -banner-bg.jpg
     stylesheets
           -main-output.css

图像和字体在开发服务器中显示正常，并且在生产中正确复制。 main-output.css - 检查时 - 显示

background:url(public/images/banner-bg.jpg

而不是预期的

background:url(../images/banner-bg.jpg)

浏览器控制台显示错误：

GET file:///home/ustrd/Documents/myproject12/dist/ public/stylesheets/public/images/ banner-bg.jpg net::ERR_FILE_NOT_FOUND

plugins: [
   new MiniCssExtractPlugin({
     filename: path.join("public", "stylesheets", "[name].css")
   })
 ],
 module: {
   rules: [
     {
       test: /\.(css|scss)$/,
       use: [
         MiniCssExtractPlugin.loader, 
         {
           loader: "css-loader",
           options: {
             sourceMap: true,
             importLoaders: 2
           }
         },
         {
           loader: "postcss-loader",
           options: {
             ident: "postcss",
             plugins: () => [new PostcssPresetEnv()]
           }
         },
         {
           loader: "resolve-url-loader",
           options: { sourceMap: true }
         },
         { loader: "sass-loader", options: { sourceMap: true } } 
       ]
     },

有什么办法解决这个问题吗？

【问题讨论】：

你有output.publicPath 用于生产吗？

标签： webpack path resolution resolve-url-loader

【解决方案1】：

我猜resolve-url-loader 不知道你最终的main-output.css 的位置，并希望它位于dist 的屋顶。您可以尝试使用自定义的join 函数来修复路径：

{
  loader: "resolve-url-loader",
  options: {
    sourceMap: true,
    join: (uri, base) => path.join('../..', base, uri);
  }
},

这应该输出如下内容：

background:url(../../public/images/banner-bg.jpg)

虽然没有测试过。检查how-it-works 了解一些详细信息。另请查看 css-loader url 设置。

更改main-output.css的位置可能更容易：

new MiniCssExtractPlugin({
     filename: "[name].css"
})

【讨论】：

1. join: (uri, base) => path.join('../..', base, uri);导致错误：TypeError [ERR_INVALID_ARG_TYPE]：“路径”参数必须是字符串类型。收到类型对象 我阅读了 resolve-url-loader 的文档，但我不明白。 2. 将 min-output.css 放在输出文件夹的根目录 DOES 工作 但这是一个丑陋的解决方案，除非我在 Webpack 完成工作后添加脚本将文件放回样式表文件夹.
3.这个 css-loader 解决方案对图片的 url 绝对没有影响：loader: "css-loader", options: { url: (url, resourcePath) => { if (url.includes("banner-bg.png")) { return false; } return true; }, },