Webpack css-loader root配置不生效，url()区分本地/远程资源，记录

情景

对于要打包的css文件中，使用url()引入静态图片

• 相对路径，表示静态资源需要打包。url('./images/xxx.png')
• 绝对路径，表示静态资源在服务器上。url('/xxx.png')

所以要根据所写的路径区分是否要处理url()方法

通过百度，发现许多文章都写了css-loader有一个root配置，而且默认不解析以 / 开头的url()

但是我配置root报错:

ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'root'. These properties are valid:  
    object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }
    at validate ...
    ...

查阅Webpack官方文档和css-loader npm文档，发现根本没有root的这个配置。。。上面的报错信息中第三行列表中也没有root的这个option

解决

options.url支持传入function

{
    loader: 'css-loader',
    options: {
        url: url => !url.startsWith('/')
    }
}

 url开头不为 '/' 返回true，意为处理url的内容

参考资料

Webpack官网文档