webpack梳理之常用loader(二)

昨天梳理了webpack的常用loader没有完全梳理完毕,今天梳理剩下的

常用loader目录

9.url-loader
10.html-withimg-loader
11.vue-loader
12.cache-loader
13.json-loader
14.script-loader
15.markdown-loader

常用loader使用

9.url-loader

• url-loader 功能类似于 file-loader,但是在文件大小小于options内参数配置的大小时,可以返回一个 DataURL,也就是说会返回打包完的文件的实体

test: /\.(jpe?g|png|gif)$/,
use: [
	{
		loader: 'url-loader',
		options: {
			limit: 102400, // 当大于100kb时候，将文件打包到outputPath中
			outputPath: 'images', // 文件打包储存的目录
			publicPath: 'images/',
			name: '[name].[hash:8].[ext]'
		}
	}
]

这里,有说法
1.先说url-loader和file-loader区别就是,感觉url-loader时file-loader的升级版,因为有limit的配置之后,会判断文件的大小来决定文件时直接打包成实体对象还是说不打包进行和file-loader一样的转移阵地操作,但是当你只装一个url-loader而且用到了超越范围的文件的时候,会发现,webpack会让你安装file-loader,说明啥,说明这个url-loader其实在打包大于限制的文件时,还是用的file-loader
2.配置参数:实际上outputPath这个参数,就是文件打包输出的目录,如果不管的话,就会到默认目录,dist目录下,配不配都可以,但是有一点需要注意了,publicPath这个参数,在outputPath配置的时候最好还是要配一下,不然的话可能会访问不到嗷,对的上,才能访问得到
3.有些大佬会有一些神奇的需求,就比如我在html里y引用图片,在css里也引用了图片,说是引用的时候就会有问题了.如果打包的css和html还不在一个路径的话,那就会导致配置完publicPath拼接出来的参数不对,建议配置绝对路径引用了,我是在网上发现的有人有这个问题,我咋也想不到业务场景,我没发生过这样的情况,最好不要这样,何必呢是不

10.html-withimg-loader

• 在安装并配置file-loader插件后，在js文件中引入图片使用import导入图片才能被打包，在css或者sass中的背景图片，需要@import css或sass到js文件中才能被打包,对于html中的img的src引入的图片无法正常打包，这时候需要引入一个webpack的插件 html-withimg-loader

　　　　{
　　　　　　test: /\.(htm|html)$/,
　　　　　　loader: 'html-withimg-loader'
　　　　},

我没用过这个的参数配置,因为好像这个loader就是一个极简的功能,我去网上查了,看了文档,确实没有参数需要配置,直接使用就好,但是也有一点需要注意,就是在配置file-loader的时候,需要把esModule设置为false,不然会和html-webpack-plugin冲突

11.vue-loader

• 解析和转换 .vue 文件,提取出其中的逻辑代码 script,样式代码 style,以及 HTML 模版 template,再分别把它们交给对应的 Loader去处理,两个字重点,就是提取,vue-loader的作用就是提取代码,就像是解析jsx文件来生成js一样,也是主要作用提取,直到梳理到这里我才意识到这个好像不是一个常用loader

//loader的配置
{
	test: /\.vue$/,
	loader: 'vue-loader'
},
//plugin的配置
plugins: [
	new VueLoaderPlugin()
],

vue-loader是可以让我们脱离框架,单独去解析vue文件的,vue-cli脚手架生成的项目,是不需要我们自己去配置这样的vue-loader的,我对这个loader不是特别的熟悉,网上看了半小时的文档,说实话很混乱,怕梳理错误造成反面效果就浅尝辙这,回头我会专门说一期这个

12.cache-loader

• 这个,是一个类似于装饰器一样的东西,主要在一些性能开销较大的 loader 之前添加此 loader,以将结果缓存到磁盘里,好比就是你们单独用自己处理文件之类的loader也可以,但是有这个之后就可以缓存你们loader的处理结果

{
	test: /\.js$/,
	use: [
		'cache-loader',
		'babel-loader'
	],
}

这个不止可以在处理js的文件的时候在最上方加入,也可以在处理任何文件后缀规则使用任何loader的时候加入,但是这个东西也不能随便去用,因为保存和读取这些缓存文件会有一些时间开销,也就是说原本没这个需求的loader,你给加上了这个,那可能结果并不是太理想,确实会有用到的业务场景,举个栗子,当你要搞一个非常多的json文件的项目的时候,作用就出现了,缓存起来处理的结果,那么就不用每次编译都等那么久了,如果能配上thread-loader,那会更快,这俩使用前置条件一样,所以一般使用的时候都使用

13.json-loader

这玩意儿有点过时了,现在不太用了,因为webpack >= v2.0.0 默认支持导入 JSON 文件

14.script-loader

• 这个loader的作用就是引入自动执行js文件的脚本代码

 {
 	test: /\.exec\.js$/,
 	use: [ 'script-loader' ]
 }


//引入调用
import exec from 'script-loader!./script.js';

被规则所匹配的文件在引入的时候就已经给执行了,这个还是有业务场景需要的,就比如自己封装的东西实际上内部代码十分复杂且独立,在引入的时候去执行就省略了一些麻烦,只需最简单的引入即可

15.markdown-loader

• 这个loader从本质上来讲跟json-loader没啥区别,都是不同文件的转换编译,但是markdown-loader转换出来的结果是html,所以一般跟html-loader配合使用

 {
 	test: /\.md$/,
 	use:[
 		'html-loader',
 		'markdown-loader'
 	]
 }

实际上我看官方文档有很多的可配置参数,但是基本没啥用,就正常的转换就可以了,想看一下了解一下的可以看https://marked.js.org/using_advanced#options

我总结完最后几个loader总有一种水了一篇博客的感觉,因为好像没讲到什么使用的东西,但是实际上就是这样的,不是所有的东西都可以讲出花来,简单的东西简单用,遇到的坑认真填坑才是正理,也有可能是vue-loader并没有实际的完全掌握,导致这篇文章达不到我的预期,有点失落,没事,明天接着来