Webpack 不重写资产 url（手写笔）

Posted 2023-03-05

【中文标题】Webpack 不重写资产 url（手写笔）

【英文标题】：Webpack not rewriting asset urls (stylus)

【发布时间】：2018-04-20 19:52:20

【问题描述】：

我正在尝试将我的资产路径从某个路径 (~assets/myimage.png) 重写到正确的目录（在我的情况下为 /assets/）。

我告诉我的 webpack 将所有图像写入 public 中的文件夹。图片正确写入，但构建 css 中的 url 未相应调整。

这是我用于手写笔文件的规则

use: ExtractTextPlugin.extract(
  fallback: 
    loader: require.resolve("style-loader"),
    options: 
      hmr: false
    
  ,
  use: [
    
      loader: require.resolve("css-loader")
    ,
    
      loader: require.resolve("stylus-loader")
    
  ]
)

以及我用于资产的那个

    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
    loader: require.resolve("url-loader"),
    options: 
      limit: 100,
      name: "static/media/[name].[hash:8].[ext]"
    
,

解析到正确目录的别名：

assets: path.resolve(__dirname, "../public")

并且公共路径设置为/assets/

publicPath: publicPath + "assets/",

由于我使用的是 ExtractTextPlugin，所以无法使用样式加载器。仅使用样式加载器时，它可以工作，但是在我的用例中，我需要一个 css 文件作为/style.css

对此有什么想法吗？

【参考方案1】：

这只是一个想法，但您的别名可能是错误的吗？你写的

assets: path.resolve(__dirname, "../public")

但是关于你的项目结构看起来像这样

--project_root/
 |--public
 |--src
 |--webpack.conf.js

应该是

assets: path.resolve(__dirname, "public") //without the "folder up" operator

【参考方案2】：

在将您的 CSS 传递给 file-loader/url-loader 之前，可能需要解析相关资产网址。

我从未使用过stylus-loader，但我会像其他任何 CSS 预处理器一样尝试尝试方法并使用resolve-url-loader：

module.exports = 
  module: 
    loaders: [
      
        test   : /\.css$/,
        loaders: ['style-loader', 'css-loader', 'resolve-url-loader']
      , 
        test   : /\.styl$/,
        loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'stylus-loader?sourceMap']
      
    ]
  
;

【讨论】：

试过了，没有任何改变

你能提供你的 css url 路径的输出吗？ stylus 文件使用什么文件扩展名？

我设法解决了我的问题。显然，样式之前已正确生成，但我的服务不必要地对其进行了更改。不过，resolve-url-loader 仍然不是必需的。感谢您的时间和帮助，

【参考方案3】：

对图片使用file-loader。

test: /\.(png|jpg|gif)$/,
        use: [
          
            loader: 'file-loader',
            options:   
          
        ]
      
    ]

【讨论】：

给我的结果与使用 url-loader

时相同

是的，它的作用相同，但它会在 CSS 文件中重写您的 URL。最佳做法是将url-loader 用于字体，file-loader 用于图像。

感谢您的评论！我尝试过使用 file-loader 但它仍然没有在 CSS 文件中重写我的 url 路径

如果删除 assets: path.resolve(__dirname, "../public") 和 publicPath: publicPath + "assets/", 会得到什么？

我的服务需要该路径才能正确处理资产