圖片處理
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> 中