图片处理
url-loader
将图片转换为base64 URI
fallback
指定当目标文件的大小超过limit选项中设置的限制时要使用的替代加载程序。
options:{
fallback: 'file-loader'
}
limit
最大文件大小，单位bytes
file-loader
处理使用import('url')、require('url')引入的文件，将引入的文件输出至output目录
{
test: /\.(gif|png|jpg|woff|svg|ttf|eot)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name]-[hash:4].[ext]",
outputPath: "./images/"
}
}
]
}
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
样式文件处理
less-loader
将less文件编译为css文件
css-loader
用于解释@import、url()
在js中解析import()、require()
举个栗子。当你 import MyImage from './my-image.png'，该图像将被处理并添加到 output 目录，并且 MyImage 变量将包含该图像在处理后的最终 url。当使用 css-loader 时，如上所示，你的 CSS 中的 url('./my-image.png')会使用类似的过程去处理。loader 会识别这是一个本地文件，并将 ‘./my-image.png’ 路径，替换为输出目录中图像的最终路径。html-loader 以相同的方式处理 <img src="./my-image.png" />
style-loader
通过创建style标签写入css来为DOM添加样式
换言之，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中