每天对自己多问几个为什么,总是有着想象不到的收获。 一个菜鸟小白的成长之路(copyer)
loader是什么?
简单来说,就是对模块的源代码
进行解析,转换成浏览器能够认识的代码
一、处理css部分
css-loader
可以将css文件看成是一个模块。是需要通过import来加载这个模块的
在加载这个模块的时候,webpack不知道如何对其加载,所以制定对应的loader来完成这个功能
安装:
npm install css-loader -D
那么如何配置loader呢?在哪里配置loader呢?
loader的配置方式
配置方式表示的意思是在我们的webpack.config.js
文件中写名配置信息
module.rules
中允许我们配置多个loader- 这种方式可以更好的配置loader,也可以清晰的看出使用哪些loader
module.rules
的配置规则如下
-
rules属性对应的值是一个数组:
[ Rule ]
-
数组中存放的是一个一个的
Rule
,Rule是一个对象,对象中可以设置多个属性-
test属性
: 对资源进行匹配,一般是用正则的方式 -
use属性
: 对应的值是一个数组:[ useEntry ]
useEntry
是一个对象,可以通过对象来设置其他的属性loader
: 必选参数 对应的是一个字符串options
: 可选参数 值是一个字符串或者对象,会被传入到loader中
use: [ {loader: 'css-loader'} ] //语法糖 use:['css-loader']
-
loader属性
:Rule.use[{loader}]
的缩写
-
代码演示(以css-loader为例):
module.exports = {
//入口文件 (可以修改地址)
entry: './src/index.js',
//打包的出口文件
output: {
//打包的路径
path: path.resolve(__dirname, './build'),
//打包过后的文件名
filename: 'build.js'
},
//loader配置模块
module: {
//配置规则
rules: [
{
test: /\.css$/,
//loader: 'css-loader' //写法一
//use: ['css-loader'] //写法二 (推荐)
use: [ //完整写法
{ loader: 'css-loader' }
]
}
]
}
}
style-loader
在上面的我们已经配置了css-loader
,但是在实际的效果中是没有生效的
原因:
- css-loader只是
负责将.css文件进行解析
,并不会将解析之后的css插入到页面
中 - 如果希望再完成
插入style的操作
,那么我们还需要另外一个loader,就是style-loader
安装:
npm install style-loader -D
配置style-loader
注意:loader的执行顺序是从右向左,所以需要经style-loader写到css-loader的前面
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
less-loader
安装:
npm install less -D
npm install less-loader -D
module: {
rules: [
{
test: /\.less$/,
//先转化成css, 使用css-loader加载,最后用style-loader来添加到页面中
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
认识PostCSS工具
- PostCSS是一个通过JavaScript来转成样式的工具
- 这个工具可以帮助我们进行一些css的转化和适配,比如自动添加浏览前缀,css样式的重置
PostCSS内部也是通过各种插件来实现转化的,所以需要安装各种插件来使用
postcss-loader
npm install postcss-loader -D
npm install autoprefixer -D //需要安装插件,添加浏览器前缀的
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader', {
loader: 'postcss-loader',
options: {
//可以提出一个单独的文件
postcssOptions: {
plugins: [
require('autoprefixer')
]
}
}
}]
}
]
}
当使用postcss-loader的时候,会先查找有不有自己options选项,如果没有就去查找postcss.config.js
这个配置文件
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
webpack.config.js
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader', 'postcss-loader']
}
postcss-preset-env
-
一个比较强大的postcss插件
-
它可以帮助我们将一些现代的CSS特性,转成大多数浏览器认识的CSS,并且会根据目标浏览器或者运行时环境 添加所需的polyfill;
-
也包括会自动帮助我们添加autoprefixer(所以相当于已经内置了autoprefixer)
安装:
npm install postcss-preset-env -D
使用:
跟autoprefixer使用是一样的,可以直接用postcss-preset-env
替换autoprefixer
效果也是一样的
二、webpack打包其他资源
file-loader
file-loader的作用就是帮助我们处理import / require()方式引入的一个文件资源,并且会将它放到我们输出的文件夹中
在使用图片有两种形式,一种是背景图片
,另外一种是img标签
//简单创建一个img标签
import image from '../imgs/mode.png'
const el = document.createElement('img')
el.src = image
document.body.appendChild(el)
注意:当使用img标签的时候,我们把图片看成是一个模块
,不要直接写成是一个字符串
安装
npm install file-loader -D
使用
//webpack.config.js
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'file-loader'
}
]
}
]
}
上面的配置,可以直接展示出图片来了,也就说明加载成功了。
但是还是存在一种不是很友好的现象
打包过后的文件,就直接存在build文件夹中,如果是一张图片还好,如果有很多张图片,就会造成打包文件夹的结构混乱
。图片被打包的文件名是32位hash值
,我们不能分辨
哪张是对应的哪张图片。所以需要进行处理。
所以需要对file-loader进行options
配置
常见的配置:
- [ext] 处理文件的扩展名
- [name] 处理文件的名字
- [hash:] 截取hash的长度,默认的32个字符太长了
- [path] 文件相对于webpack配置文件的路径
//重新对file-loader进行配置
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
//在打包的文件夹中创建一个images文件夹,用来保存图片的
outputPath: 'images',
//给图片取名字
name: "[name]_[hash:8].[ext]"
}
}
]
}
]
}
效果图:
url-loader
url-loader跟file-loader的工作原理是一样的
url-loader的区别: 就是对图片有限制,对图片较小的进行base64编码
默认情况下: url-loader对所有图片都会进行base64编码
所以会发现,打包过后的文件,就一个build.js,而且里面都还是base64
这也不是我们想要的,只对限制一下的图片,进行base64的转换。
为什么呢?
小的图片转换base64
之后可以和页面一起被请求,减少不必要的请求过程
- 而
大的图片
也进行转换,反而会影响页面的请求速度
小于100kb
的图片,进行转化
{
test: /\.(jpe?g|png|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
//在打包的文件夹中创建一个images文件夹,用来保存图片的
outputPath: 'images',
//给图片取名字
name: "[name]_[hash:8].[ext]",
//配置limit
limit: 100 * 1024
}
}
]
}
认识asset module type
目前webpack的版本为webpack5
- 在webpack5之前,加载这些资源是使用的url-loader file-loader
- 在webpack5开始,可以直接使用资源模块类型(asset module type),来代替上面的类型
资源模块类型,通过添加模块类型,来代替loader
asset/resource
发送一个单独的文件并导入URL。代替file-loaderasset/inline
导出一个资源的data URl。代替使用url-loaderasset
在导出一个data URI 和 发送一个单独的文件之间自动选择。之前通过使用url-loader,并且配置资源体积限制实现
{
test: /\.(jpe?g|png|gif|svg)$/,
type: 'asset',
// 添加images,存放图片
generator: {
filename: 'images/[name]_[hash:8][ext]'
},
//限制图片的大小,小的进行转化
parser: {
dataUrlCondition: {
maxSize: 100 * 1024
}
}
}