Loader
1. 图片处理
url-loader
将图片转换为base64 URI
{
module:{
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use:[{
loader:"url-loader",
options:{
limit: 5000,
outputPath: "images/",
name: "[name]-[hash:4].[ext]",
fallback: "file-loader"
}
}]
}
]
}
}
fallback
指定当目标文件的大小超过limit选项中设置的限制时要使用的替代加载程序。limit
最大文件大小,单位bytes
2. 自定义字体处理
file-loader
处理使用import('url')
、require('url')
引入的文件,将引入的文件输出至output
目录
{
module:{
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name]-[hash:4].[ext]",
outputPath: "fonts"
}
}
]
}
]
}
}
name
输出的文件名
name: '[name].[ext]' //logo.png
name: '[hash].[ext]' //3a9d7b3c4c00d76d9596a0194300cb94.png
name: '[hash:4].[ext]' //3a9d.png
name: '[name]-[hase:4].[ext]' //logo-3a9d.png
outputPath
输出路径
outputPath: './images/'
以output
为相对路径。eg./dist/images/logo.png
3. 样式文件处理
{
module:{
rules: [
{
test: /\.(scss|sass)$/,
use: ["style-loader", "css-loader", "sass-loader"]
}
]
}
}
less-loade