Iconfontcn-loader

用于将阿里巴巴尺量图标库上的 css font 文件下载到本地并相应修改 css 中路径。

思路

• 通过正则匹配 css 中 @import 阿里图标库地址的代码，并得出线上地址。
• 储存记录该条地址，并返回相应标记
• 遍历储存记录，通过异步请求线上地址，获取文件内容，再进行以下操作：
  • 正则匹配文件中的字体文件地址
  • 然后写入到本地文件夹
  • 最后替换 @import 地址为本地相对路径

具体实现

// loader.js
import request from 'request'
import path from 'path'
import fs from 'fs'
import { dealOnlineCss } from './utils'

const ImportReg = /\@import\s+url\([^\)]*at\.alicdn\.com\/t\/font[^\;]+\);?/ig
const cssUrlReg = /\/\/[^\(]*at\.alicdn\.com\/t\/font(\w)+/i
const fontUrlReg = /\/\/[^\(]*at\.alicdn\.com\/t\/font[^\?]+/ig

// css: ...@import url("http://at.alicdn.com/t/font_1471854245_334499.css")...

module.exports = (source) => {
    this.cacheable()
    const callback = this.async()

    let _id = 0
    let urlMap = {}
    let total = 0
    let done = 0

    let css = source.replace(ImportReg, (res) => {
        // res: @import url("http://at.alicdn.com/t/font_1471854245_334499.css")
        let importMatch = res.match(cssUrlReg)
        // importMatch: at.alicdn.com/t/font_1471854245_334499
        let url = 'http://' + importMatch[0] + '.css'
        if (urlMap[url]) return
        const replaceStr = '/*_______' + _id++ + '_______*/'
        urlMap[url] = replaceStr
        total++
        return replaceStr
    })

    for (let v of urlMap) {
        ((v) => {
            request(v, (err, res, body) => {
                ...

                dealOnlineCss()
            })
        })(v)
    }
}

// utils.js
function dealOnlineCss() {
    ...
}
module.exports = dealOnlineCss