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]'
		}
	}
]

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'
　　　　},

11.vue-loader

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

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

12.cache-loader

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

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

13.json-loader

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'
 	]
 }