1、什么是loader
webapck的本质是一个模块打包工具, 所以webpack默认只能处理JS文件,不能处理其他文件,用于将其它类型文件转换为webpack能够识别处理模块的工具我们就称之为loader。
2、如何使用loader
① 通过npm安装对应的loader。 ② 按照loader作者的要求在webpack进行相关配置。 ③ 使用配置好的loader。
3、webpack-file-loader(打包css,js中的图片、字体图标)
(1)fileloader使用
fileloader可以打包图片文件。
https://www.webpackjs.com/loaders/file-loader/
① 安装file-loader
npm install --save-dev file-loader
② 在webpack.config.js中配置file-loader
打包图片
module.exports={
module:{ //告诉webpack如何处理webpack不能够识别的文件
rules:[
{
test:/\.(png|jpg|gif)$/,
use:[
{
loader:'file-loader',
options:{}
}
]
}
]
}
}
打包字体图标
{
test: /\.(eot|json|svg|ttf|woff|woff2)$/,
use: [
{
loader: 'file-loader',
options: {
// 指定打包后文件名称
name: '[name].[ext]',
// 指定打包后文件存放目录
outputPath: 'font/',
}
]
}
(2)fileloader的其他配置
① 默认情况下fileloader生成的图片名就是文件内容的 MD5 哈希值 可以新增配置：name: "[name].[ext]" ② 默认情况下fileloader会将生成的图片放到dist根目录下面 如果放到指定目录下面, 那么可以新增配置：outputPath: "images/" ③ 如果要将图片托管到其它服务器, 需配置 publicPath: "托管服务器地址" ③ 遇到的坑：file-loader打包图片文件时路径错误输出为[object-module] 在webpack的file-loader配置项里，设置esModule为false。
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
esModule: false
}
}
]
}
]
}
3.webpack-url-loader(打包css,js中的图片)
(1)urlloader
url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。
(2)urlloader使用
https://www.webpackjs.com/loaders/url-loader/
① 安装urlloader
npm install --save-dev url-loader
② 配置urlloader /* module: 告诉webpack如何处理webpack不能够识别的文件 * */
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024 * 100,
// 指定打包后文件名称
name: '[name].[ext]',
// 指定打包后文件存放目录
outputPath: 'images/',
}
}
]
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: '[name].[ext]',
},
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
},
},
]
}
limit: 指定图片限制的大小 如果被打包的图片超过了限制的大小, 就会将图片保存为一个文件； 如果被打包的图片没有超过限制的大小, 就会将图片转换成base64的字符串。
(3)优势
图片比较小的时候直接转换成base64字符串图片, 减少请求次数， 图片比较大的时候由于生成的base64字符串图片也比较大, 就保持原有的图片。
推荐文章
您阅读本篇文章共花了：
发表评论