加载器原创
# 加载器
# 介绍
- 除了常见的内置资源模块来导入资源外还可使用loader
- 用于加载资源
- 下载loader后,不需要引入,只需要声明即可,会自动在内存中加载使用
{
test: /\.css$/, //解析css
use: [
"style-loader", // 在html中创建style标签,将css文件链接进去
"css-loader", // 将内存中编译后的css转换为模块
"less-loader" // 将less编译为css,但不生成css文件,依旧存在于内存中
] //从右往左依次执行
// 如果只需要一个loader则可以直接配置loader对象 {loader:“loader名”}
// 如果需要使用多个loader则必须使用use数组来顺序配置每个loader对象
// 也可以使用简写形式如上
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 使用
- 安装loader
- use 使用
- use除了字符串还可为数组,配置多组loader
# css-loader
# less-loader
# csv-loader
# eslint-loader
- webpack5之前是采用loader来进行语法检查,
- 现在使用plugin来进行检查
# babel-loader
- 安装babel-loader 解析es6进行简单的js语法转换
- 安装@babel/core babel核心模块
- 安装@babel/preset-env babel插件的集合
{
test: /\.js$/, //匹配文件
exclude: /node_modules/, //排除文件
use:{ // 配置文件也可写在 .babel.config.js/json文件中
loader: "babel-loader", //解析的loader
options:{
presets:["@babel/preset-env",{
useBuiltIns:"usage", // 实现按需引入polyfill
corejs:{version:3}, // 解决不能找到core-js的问题
targets:{ // 指定兼容性处理的浏览器
"chrome":"58",
"ie":"9"
}
}], //预设配置
cacheDirectory:true // 开启babel缓存
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# @babel/polyfill
- 可以转换所有的es6高级语法
- 但是可能导致打包后的文件过大
npm i @babel/polyfill
import @babel/polyfill
1
2
2
# core-js
- 可以实现按需引入高级语法转换
- npm i core
# url-loader
- 识别并转换图片资源
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:"file-loader",
options:{
limit:8192, // 设置图片转换为base64编码优化性能
publicPath:"../dist/images", // 决定图片的url路径
outputPath:"images", // 决定文件本地输出路径
name:"[hash:5].[ext]" // 修改文件名,扩展名
}
}]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# html-loader
- url-loader只能处理js中引入的图片,引入的样式中的图片,但是无法处理html中img标签中的图片
- 因此需要使用html-loader来处理
- npm i html-loader
- 单纯用于处理html中的图片,use使用即可无需配置
# file-loader
- 用于处理所有的其他资源,如字体,音视频等