webpack之loader

webpack学习

学习课程

1. loader打包图片资源
2. loader是什么
3. loader的作用是什么
4. url-loader的使用
5. loader打包css（样式）文件
6. loader使用的先后顺序
7. css-loader常用的配置项
8. css的打包模块化
9. 如何使用webpack打包字体文件

一、loader打包图片资源

我们在index.js文件中引入图片资源，如果不配置打包时就报错了

1. 首先下载npm install file-loader -D
2. webpack配置文件配置

module:{
	rules:[
			{
			//遇到的后缀名为.jpg或.txt或.vue结尾的等等
				test：/\.jpg$/,
				use:{
						loader:'file-loader'//首先下载file-loader插件，file-loader可以帮助我们打包图片资源
					}
		}
]

}

3. npm run bundle
4. 打包之后在dist中生成一个新的图片的名称

当我不想在打包之后变动图片的名称的操作

• 在配置项（webpack.config.js)进行配置

	module:{
			rules:[
					{
					//打包图片的图片的后缀名
					test:"/\.(jpg | png | gif)$/",
					use:{
								loader:'file-loader',
								//配置参数的设置
								options：{
											//图片原先的名称，原先的图片的后缀名
											//placeholder ：占位符
											name:'[name].[ext]'
									}
							}
						}
			]
	}

将我的图片打包之后 放到dist目录下的images的文件夹下

	options：{
			//添加一个配置项即可
			outputPath: ' images/ ' //配置这个即可

}

npm run bundle 进行打包

二、loader是什么

三、loader的作用是什么

因为webpack只能识别js文件，不能识别非js的文件，而loader就是帮助webpack识别他不能识别的文件。

四、url-loader的使用

1. 先下载 npm install url-loader --save–dev
2. 在webpack.config.js中配置一下

	module:{
			rules:[
					{
					//打包图片的图片的后缀名
					test:"/\.(jpg | png | gif)$/",
					use:{
								loader:'url-loader',//改为url-loader即可
								//配置参数的设置
								options：{
											//图片原先的名称，原先的图片的后缀名
											//placeholder ：占位符
											name:'[name].[ext]'
									}
							}
						}
			]
	}

url-loader打包图片不会生成一个images文件，生成一个base64的字符串，直接放到了bundle.js文件中，但是也可以在页面中将效果展示出来

使用url-loader打包图片资源的优、缺点

优点：

• 图片打包到js文件中，加载完js，图片也出来了，减少了一次http请求，节约时间

缺点：

• 如果图片过大，造成打包生成的文件过大，加载js文件的时间长，页面处于空白页面，用户体验感差
  最适宜用url-loader的使用方式
• 图片只有1,2k的时候使用url-loader，减少http的请求，节约时间
• 图片过大的时候使用file-loader，

图片自动根据自身的大小来进行相互file-loader和url-loader的转换

// 自动根据图片大小来进行file-loader和url-loader的转化
limit：2048（2KB）//小于2048个字符，base64放到bundle.js文件中，大于在dist文件夹生成图片文件
配置

	module:{
			rules:[
					{
					//打包图片的图片的后缀名
					test:"/\.(jpg | png | gif)$/",
					use:{
								loader:'url-loader',//改为url-loader即可
								//配置参数的设置
								options：{
											//图片原先的名称，原先的图片的后缀名
											//placeholder ：占位符
											name:'[name].[ext]',
											//将图片进行打包的时候，打包到images文件夹下，添加一个配置项即可
											outputPath: ' images/ ' //配置这个即可，
											// 自动根据图片大小来进行file-loader和url-loader的转化
									limit：2048（2KB）//小于2048个字符，base64放到bundle.js文件中，大于在dist文件夹生成图片文件
									
									}
							}
						}
			]
	}

五、loader打包css（样式）文件

配置：(都是在webpack.config.js文件中）

module:{
		rules:[
			{
		test:"代码同上"，
		use:{
			代码同上
			loader:"",
			options:{
					name:"",
					outputPath:"",
					limit:1024
		}
}，
######  这是对css资源进行打包的配置 #####
	{
		test"/\.css，scss$/"，
		use:['style-loader','css-loader','sass-loader']
		//style-loader是会在head表签上挂载一个<style>样式</style>
		//scss，scss语法的使用
     }
]

}

在使用css配置需要先下载

• 在使用css的时候需要下载css-loader和style-loader
• npm install style-loader css-loader -D

在使用配置scss的时候先下载：

• npm install sass-loader node-sass --save-dev

想要样式自动添加厂商前缀的配置

厂商前缀指的是 -webiti-这样的

在配置中use:[
		"style-loader",
		"css-loader",
		"sass-loader",
		"postcss-loader"//有一个postcss.config.js配置文件配置插件
]

前提：

• 先下载 npm install -D postcss-loader
• 在目录下创建一个postcss.config.js文件
• 配置postcss.config.js

先下载 npm  install autoprefixer -D的插件
module.exports = {
//插件
	plugins:[
			reqiure('autoprefixer')//添加厂商前缀

   ]
}

六、 loader使用的先后顺序

是从右到左，从下到上

七、css-loader常用的配置项

在webpack.config.js中的配置：

use：[
		'style-loader'，
		//将css-loader，转化为对象进行相应的配置项
		{
			loader:"css-loader"，
			options：{
			//代表的我在Js文件中引入了scss文件，比如：import './index.scss',
		我在index.scss文件中又引入了scss文件，比如：@import  './img.scss',另一个scss文件
					importLoaders:2,//保障无论在哪里引入scss文件都会从上往下以次执行所有的loader
				}
	}
]

八、css的打包模块化

模块化：指的是指在当前的模块化有效

需要配置：

webpack.config.js文件中配置

use：[
		'style-loader'，
		//将css-loader，转化为对象进行相应的配置项
		{
			loader:"css-loader"，
			options：{
			//代表的我在Js文件中引入了scss文件，比如：import './index.scss',
		我在index.scss文件中又引入了scss文件，比如：@import  './img.scss',另一个scss文件
					importLoaders:2,//保障无论在哪里引入scss文件都会从上往下以次执行所有的loader
					
					modules:true,//代表的是样式指在当前引入的有效，而在另一个页面中无效，除非重新引入。
					
				}
	}
]

比如：

我在index.js页面中有一个img，我给img设置width:100px;height:100px;

首先我要先引入 import style from “./index.scss”
在给图片设置宽高，

当我还想给别的页面添加这个样式，需要重新引入
import style from “./index.scss”

九、如何使用webpack打包字体文件

比如：我有一个index.js文件，里面放的内容有

	var  root = document.getElementById('root')
	root .innerHTML = ' <div class ="test">字体</div>' 
	

我在我的图标网站可以下载两个图标，下载到本地
下载的内容会出现icon.css等等文件，
在我的项目中创建一个font文件，将我下载的内容全部复制到font文件夹中
在index.scss中将我下载的字体库的内容复制到我的index.scss中，

在我的index.js中
var root =  document.getElementById("root")
import  './index.scss'
root.innerHTML = '<div class ="iconfont   icon-changjingguanli"></div>'

webpack打包字体的配置

需要提前安装 file-loader，npm install  file-loader -D
	{
		test"/\.(eot |　ttf | svg)$/"，
		use:{
					loader:"file-loader"
				}
     }
]

}

npm run bundle进行打包