教你写个webpack的loader

骑猪看日落 2022-03-02 08:18 199阅读 0赞

## 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`文件在导入,不大方便).

效果图

![3469740267-5c4adf71a2938_articlex][]  
例:  
对应代码

<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'] // 顺序一定要注意
          }
        ]
      }
    }

[3469740267-5c4adf71a2938_articlex]: /images/20220302/f5889e01009a4e7b88f2d2762b5405ef.png
[github]: https://github.com/liuyangjike/easy-css-loader