陆丰网站建设,企业网站 三合一,三角镇建网站公司,搜索引擎平台排名webpack定义的loader需要遵循单一功能原则#xff0c;也就是一个loader只实现一个功能。在实现开发中#xff0c;我们会直接使用诸如蓝湖等生成的样式#xff0c;比如
button{background: rgb(255, 85, 46);
}但为了考虑主题换肤#xff0c;我们实现的想要的可能是
butto…webpack定义的loader需要遵循单一功能原则也就是一个loader只实现一个功能。在实现开发中我们会直接使用诸如蓝湖等生成的样式比如
button{background: rgb(255, 85, 46);
}但为了考虑主题换肤我们实现的想要的可能是
button{background: var(--jobb_primary_color);
}所以在这里我们要实现一个vue文件中内容替换的loader。
首页创建webpack-replace-loader.js
我们通过在loaders/webpack-replace-loader.js中定义一个函数(我们知道loader就是一个函数)实现代码如下:
module.exports function (source) {//source就是读取文件的内容//可以在此处对source进行替换...this.callback(null, source);
}使用loader以vue.config.js配置为例
module.exports {chainWebpack: (config) {config.module.rule(vue).test(/\.vue/).use(webpack-replace-loader).loader(webpack-replace-loader).options(loader参数).end();},configureWebpack: (config) { //加载本地loaderconfig.resolveLoader.modules.push(./loaders/); }
}loader传入参数考虑
内容替换实现方式一般是通过正则
new RegExp(pattern[, flags])
// eg.
str.replace(new RegExp(rgb(255, 85, 46, ig), var(--jobb_primary_color));所以我们需要设置三个参数
let options {search: 正则表达式的文本, flags: 标志, replace: 替换结果}考虑到会存在多个变量替换因此
let options [{search: rgb(255, 85, 46, flags: ig, replace: var(--jobb_primary_color)}]而loader参数只支持string | object, 因此我们需要支持两个写法
//1.考虑多个变量
let options {multi: [{search: rgb(255, 85, 46, flags: ig, replace: var(--jobb_primary_color)}]
}
//2.单个变量
let options {search: rgb(255, 85, 46, flags: ig, replace: var(--jobb_primary_color)}步入正题loader编写
//loaders/webpack-replace-loader.js
const { getOptions } require(loader-utils);
module.exports function (source) {//通过loader-utils获取参数let options getOptions();//分情况考虑if(Array.isArray(options.multi)){options.multi.forEach(item) {//替换source replaceFunction(item, source)}}else{//替换source replaceFunction(options, source)}this.callback(null, source);
}替换逻辑
//错误提示
const errTip [webpack-replace-loader: Error] The property search and replace is essential;const replaceFunction (data, source){let { search, flags, replace} data;if(!search || !replace){throw new Error(errTip);}return source.replace(new RegExp(search, flags), replace);
}
