- 图片和字体处理的loader是什么?
处理图片的loader一般使用file-loader或者使用url-loader。url-loader和file-loader 可以理解为本质上没什么区别，参数都是一样的。url-loader只是对file-loader的增强，多了一些属性，比如常用的limit，mimetype ... - file-loader 在使用的时候需要注意哪些?
当我们使用file-loader的时候，把相同的文件放到一个目录的时候，需要注意文件的目录路劲是否正确
使用url-loader来加载图片
- 安装
npm install url-loader -D
- 配置loader
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "url-loader",
options: {
name: "[name].[ext]",
outputPath: "images/",
publicPath: "../images",
limit: 1024 * 3, //阈值 超过阈值的图片会独立文件，没有超过会处理成base64
},
},
},
我的css插件配置
new MiniCssExtractPlugin({
filename: "css/[name].css",
}),
- 注意点，因为我的css全部都打包进入到css目录，css中有引入图片，这个时候需要注意outpath publishPath 的配置
- outpath 表示打包输入文件的目录 默认为 undefined
- publishPath ：表示你文件配置定于发布目录。简单的讲就是css中图片或者字体url拼接的字符串
-
limit:表示打包的阈值，如果超过这个大小就打包成文件，小于这个值就打包成base64。它的单位为比特（B）
上述例子，打包出来文件格式如下
image.png
webpack 处理字体
- 字体导入
首选把下载的字体，然后导入到项目中。我一般使用的是iconfont的字体。解压里面有一个demo，查到demo，设置字体即可
iconfont 字体 - 安装loader
npm i url-loader -D
- 配置loader
{
test:/\.(eot|svg|ttf|woff|woff2)/,
use:{
loader:"file-loader",
options:{
name:"[name].[ext]",
outputPath: "font/",
publicPath: "../font",
}
}
}
-注意:字体的处理也要想图片处理一样，需要注意文件的路径。处理方式和图片一样。
-
打包结果
image.png
