时间:2021-05-25
最近负责的Weex项目涉及到一些构建上的问题,需要通过自定义webpack的loader去实现,于是学习了一下这方面的知识,写一篇文章做个总结,以免遗忘。
webpack想必前端圈的人都知道了,大多数人也都或多或少的用过。简单的说就是它能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中。可以说,它作为一个打包工具,在前端工程化浪潮中,起到了中流砥柱的作用。
那webpack其中非常重要的一环就是,能够对加载的资源文件,进行一些处理。比如把less、sass文件编译成css文件,负责这个处理过程的,就是webpack的loader。
什么是loader
我们都知道webpack作为当下最火的一个前端构建工具,具有很多很实用的功能,loader就是其中之一。说的通俗一点,loader就是用于对模块的源码进行转换。对于做Android的同学,大家可以把它想象成gradle中的transform task。
loader怎么用
在平时的开发过程中,loader的使用也是非常常见的,我们可以在工程的webpack.config.js中定义:
module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ], }, { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ]}可以看到,对于css文件,我们使用css-loader,对于vue文件,我们使用vue-loader,对于图片文件,我们使用file-loader。这些loader会将对应的文件进行转换,构建出最终的产物。
如何自定义loader
有了上面的经验,我们该如何自定义一个loader呢?其实也是非常简单的。
首先我们创建一个js文件,就取名叫test-loader吧。
var loaderUtils = require('loader-utils');module.exports = function(source) { console.log("start process code..."); var options = loaderUtils.getOptions(this) || {}; if(options !== {}) { var replaceMap = options["replaceMap"]; for(var key in replaceMap) { console.log(source); source = source.replace(key, replaceMap[key]); console.log(source); } } return source;};这就是全部的代码了,其实一个loader内部就是一个node模块,代码的编写就和平时写node一样就ok了。
test-loader的逻辑就是获取到设置的option,并且做一个文本的替换。
假设我们还有2个js文件,分别是test.js和index.js
test.js
index.js
const test = require('./src/test');console.log(test);然后我们在webpack.config.js中加入我们自己的test-loader。
{ test: /\.js$/, loader: 'test-loader', exclude: /node_modules/, options: { replaceMap: { "loaded": "yeah" } }}其中options中,我们将“loaded”字符串替换成“yeah”。
但是我们的loader并没有上传到npm中,所以我们还需要在webpack.config.js中加入下面这段代码:
resolveLoader: { modules: [path.join(__dirname, './src/loaders'), 'node_modules']}用于加载本地loader。
这样我们最终构建出来的产物中,所有的“loaded”字符串就会被替换成“yeah”了。
小结
这篇文章非常浅显,主要就是讲了一下loader的使用方式,其实我们熟知的很多loader都是这么做的,只不过是业务逻辑上的复杂程度不同而已,大家也可以自己试试看。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言:前面几篇讲了自定义控件绘制原理Android自定义控件基本原理详解(一),Android自定义控件之自定义属性(二),Android自定义控件之自定义组合
前言:前两篇介绍了自定义控件的基础原理Android自定义控件基本原理详解(一)、Android自定义控件之自定义属性(二)。今天重点介绍一下如何通过自定义组合
Java中自定义异常详解及实例代码下面做了归纳总结,欢迎批评指正自定义异常classChushulingExceptionextendsException{pu
AndroidViewPagerIndicator详解及实例代码关于自定义View的属性零碎知识自定义View和自定义属性的知识不再此提及,这里着重说的是属性在
Android自定义View中attrs.xml的实例详解我们在自定义View的时候通常需要先完成attrs.xml文件在values中定义一个attrs.xm