详解webpack自定义装载机初探 - 行业资讯 - 肥雀云

最近负责的Weex项目涉及到一些构建上的问题,需要通过自定义webpack的装载机去实现,于是学习了一下这方面的知识,写一篇文章做个总结,以免遗忘。

webpack想必前端圈的人都知道了,大多数人也都或多或少的用过。简单的说就是它能够加载资源文件,并对这些文件进行一些处理,诸如编译,压缩等,最终一起打包到指定的文件中。可以说,它作为一个打包工具,在前端工程化浪潮中,起到了中流砥柱的作用。

那webpack其中非常重要的一环就是,能够对加载的资源文件,进行一些处理,比如把少,sass文件编译成css文件,负责这个处理过程的,就是webpack的加载程序。

我们都知道webpack作为当下最火的一个前端构建工具,具有很多很实用的功能,加载程序就是其中之一。说的通俗一点,加载程序就是用于对模块的源码进行转换。对于做安卓的同学,大家可以把它想象成gradle中任务的变换。

在平时的开发过程中,装载机的使用也是非常常见的,我们可以在工程的webpack.config.js中定义:

　　　　　　模块:{ 　　规则:[ 　　{ 　　测试:/\ . css/美元, 　　用途:[ 　　“vue-style-loader”, 　　“css-loader” 　　), 　　},{ 　　测试:/\ .vue/美元, 　　装载机:“vue-loader”, 　　选择:{ 　　加载器:{ 　　}//其他vue-loader选项到这里　　} 　　}，　　{ 　　测试:/\。gif (png | jpg | | svg)/美元, 　　装载机:“file-loader”, 　　选择:{ 　　名称:“[名字]。[ext] & # 63; (hash)” 　　} 　　} 　　] 　　} 　　之前　　　　

可以看的到,对于css文件,我们使用css-loader,对于vue文件,我们使用vue-loader,对于图片文件,我们使用file-loader。这些加载程序会将对应的文件进行转换,构建出最终的产物。

有了上面的经验,我们该如何自定义一个装载机呢?其实也是非常简单的。

首先我们创建一个js文件,就取名叫test-loader吧。

这就是全部的代码了,其实一个加载器内部就是一个节点模块,代码的编写就和平时写节点一样就好了。

test-loader的逻辑就是获取到设置的选项,并且做一个文本的替换。

假设我们还有2个js文件,分别是. js和index.js

测试。js
　　

　　　　　　const str=凹釉夭馐浴? 　　模块。出口=str; 　　　　

index.js 　　　　　　const测试=需要('/src/测试。'); 　　 console.log(测试); 　　　　

然后我们在webpack.config.js中加入我们自己的test-loader。

　　　　　　{ 　　测试:/\ . js/美元, 　　装载机:“test-loader”, 　　排除:/node_modules/, 　　选择:{ 　　replaceMap: { 　　“加载”:“是的” 　　} 　　} 　　} 　　之前　　　　

其中选项中,我们将“加载”字符串替换成"是的" .

但是我们的加载程序并没有上传到npm中,所以我们还需要在webpack.config.js中加入下面这段代码:

　　　　　　resolveLoader: { 　　模块:[路径。加入(__dirname。/src/加载器),' node_modules '] 　　} 　　之前　　　　

用于加载本地加载程序。

这样我们最终构建出来的产物中,所有的“加载”字符串就会被替换成“是的”了。

这篇文章非常浅显,主要就是讲了一下装载机的使用方式,其实我们熟知的很多机都是这么做的,只不过是业务逻辑上的复杂程度不同而已,大家也可以自己试试看。
　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。