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