css-loader 对url的处理

最新推荐文章于 2025-06-25 14:43:59 发布

tearsknow

最新推荐文章于 2025-06-25 14:43:59 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css-loader 文章标签： css-loader webpack style-loader

1 篇文章

订阅专栏

本文介绍了一种解决开发过程中因图片加载导致内存占用过高的方法。通过修改css-loader的处理逻辑，使得图片资源可以直接从静态文件夹加载，从而减少内存使用。详细介绍了如何配置Express来提供静态资源服务，并通过style-loader配合transform.js实现url路径转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果url 以 “/” 开始是不会对url进行处理的，除非配置了root

url(/image.png) => url(/https/blog.csdn.net/image.png)

但是在我们项目中，由于有些图片比较大，在开发时候会被加载在内存中去，导致了开发时内存占用太大，想直接引用静态资源地址。

// server.js 这个是开发时为一些静态资源直接提供服务地址
app.use('/dist/assets', express.static(path.join(__dirname, '../src/assets/static/')))

background-image:url(./assets/logo.png) /*这样写会会报错，因为css-loader会去require它*/
background-image:url(/assets/logo.png) /*这样写直接取了根目录，而不是相对于网页的目录，*/

所以要想办法在css-loader处理完毕之后将url(/assets/logo.png)替换为url(assets/logo.png)
所以我用的办法是 style-loader

{
  loader: 'style-loader',
  options: {
    transform: path.join(__dirname, './transform.js') // 必须是绝对地址，而且不能直接用函数代替
  }
}

// transform.js
module.exports = function (css) {
  return css.replace('url(/', 'url(')
}

这样处理之后，只要我的url中以“/”开始就表示不需要css-loader处理。