css-loader 对url的处理

css-loader

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

url(/image.png) => url(/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处理。