教你写个webpack的loader

loader介绍

loader是将指定格式的资源文件转化成一定格式输出,例如sass-loader将scss文件转化成css文件, babel-loader将ES6转化成ES5.一个loader的结构就是一个函数,最简单loader如下:

module.exports = function(content){  // content就是你要处理文件的内容,如处理App.vue文件,content就是你在App.vue写的代码
    //... 中间可以对content处理
    return content  // 这里你也可以用this.callback(null, content)导出
}

loader的使用,配置webpack文件

    {
        test: /\.css$/,
        // easy-css-loader就是下面我要写的loader
        use: ['style-loader', 'css-loader', 'easy-css-loader'] 
    }

loader解析顺序是:从右向左, 上一个loader处理完的content传递给下一个loader, 一般每种loader功能是单一的

easy-css-loader实现

easy-css-loader将实现一些css代码的简写(虽然sass等已经有这个功能,但是每次都要写个.scss文件在导入,不大方便).

效果图

例:
对应代码

<div>
    <div class="easy-css">2</div>
</div>
<style >
.easy-css{
  border: 1px solid red;
  posC;    
  wh(100px, 80px);
  font(20px, blue, center);
  comB(http://ww1.sinaimg.cn/large/b44313e1gy1fyz1li77jzj20q411wdop.jpg); 
}
</style>

下面讲讲font(..)解析过程

<!--你代码写的样式-->
<style >
  .easy-css{
    font(20px, yellow);
  }
</style>
<!-- 会解析成 -->
<style >
  .easy-css{
    font-size: 20px;
    color: yellow;
    text-align: left;
  }
</style>

上面的代码, 如果在webpack配置解析.css的自定义的loader, 那么在loader里,前面说的content就长成这样了

  .easy-css{
    font(20px, yellow);
  }

是不是只要正则匹配font(20px, yellow),替换成

font-size: 20px;
color: yellow;
text-align: left;

下面是loader的代码

/**
 * @param {*} fontStr 待解析字符串的`font(..)`
 * @returns 解析完css字体样式
 */
function fontParse(fontStr) {
  let start = fontStr.indexOf('(') + 1  // ‘(’后面一个字符位置
  let args = fontStr.slice(start, -1)  // 就是取font(..)括号里面字符串,按例子args为'20px, yellow'
  let argsList = args.split(',')  // 分割成数组['20px', 'yellow']
  switch (argsList.length) { // 判断开发者传递参数个数
    case 2:
      argsList.push('left')
      break
    case 1:
      argsList.push('#000', 'left')
      break
  }
  cssName = ['font-size', 'color', 'text-align'].map((item, index) => {
    return `${item}:${argsList[index]}` // 组合成新的样式数组
  })
  let cssStr = cssName.join(';')  //形成新css字符串
  return cssStr  // 回调
}
module.exports = function (content) {  // content就是在<style>..</style>写的里面的内容,或者引入的.css文件
  content = content.replace(/font\((.|\n)*?\)/ig, (str) => fontParse(str)) 
  this.cacheable()  // 缓存
  this.callback(null, content)  // 回调
}

上面的正则会匹配到font(..), str就匹配到的font(20px, yellow)字符串, 最终会被fontParse(str)值替换.就已经完成font的解析

其它样式的解析可以写成链式

module.exports = function (content) {  // content就是在<style>..</style>写的里面的内容,或者引入的.css文件
  content = content.replace(/font\((.|\n)*?\)/ig, (str) => fontParse(str))  // 解析font()字体样式
                    .replace(/wh\((.|\n)*?\)/ig, (str) => whParse(str))  // 解析wh()宽高样式
                      .replace(/posC(.|\n)*?;/ig, (str) => posCParse(str))  // 解析posC居中样式
                          .replace(/flex(.|\n)*?;/ig, (str) => flexParse(str))  // 解析flex布局样式
                            .replace(/comB(.|\n)*?;/ig, (str) => backParse(str))  // 解析comB(..)背景图片样式
                              .replace(/posL(.|\n)*?;/ig, (str) => posLRParse(str, 'left')) // 解析posL(..)居左样式
                                .replace(/posR(.|\n)*?;/ig, (str) => posLRParse(str, 'right'))  // 解析posR(..)居右样式
  this.cacheable()  // 缓存
  this.callback(null, content)  // 回调
}

一个loader大功告成

说明

具体的可以去看源码,在github上,觉得可以的话帮忙star一下

我发布npm包easy-css-loader使用如下配置

{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'easy-css-loader'] // 顺序一定要注意
      }
    ]
  }
}