Webpack file-loader與url-loader深度指南
更新時(shí)間：2026年03月18日 09:09:21 作者：圖的AI碼課日記
本文主要介紹了Webpack file-loader與url-loader深度指南,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
一、靜態(tài)資源處理的演進(jìn)
webpack 4 及之前
需要 file-loader 和 url-loader 處理圖片、字體等資源。
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: ['file-loader']
}
]
}
};
webpack 5
內(nèi)置 Asset Modules，無(wú)需額外 loader。
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
type: 'asset/resource'
}
]
}
};
二、file-loader
將文件復(fù)制到輸出目錄，返回文件路徑。
基礎(chǔ)用法
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[hash:8].[ext]',
outputPath: 'images/'
}
}
}
配置選項(xiàng)
{
loader: 'file-loader',
options: {
// 文件名模板
name: '[path][name].[ext]',
// 輸出目錄
outputPath: 'assets/',
// 公共路徑
publicPath: '/static/',
// 自定義文件名
name(file) {
if (process.env.NODE_ENV === 'development') {
return '[path][name].[ext]';
}
return '[contenthash].[ext]';
}
}
}
三、url-loader
小文件轉(zhuǎn) base64，大文件用 file-loader。
基礎(chǔ)用法
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 8192, // 8KB 以下轉(zhuǎn) base64
fallback: 'file-loader'
}
}
}
優(yōu)勢(shì)
- 減少 HTTP 請(qǐng)求
- 小圖標(biāo)直接內(nèi)聯(lián)
劣勢(shì)
- 增加 JS/CSS 體積
- 無(wú)法利用瀏覽器緩存
四、webpack 5 Asset Modules
四種類(lèi)型
module.exports = {
module: {
rules: [
// asset/resource：替代 file-loader
{
test: /\.(png|jpg|gif)$/,
type: 'asset/resource'
},
// asset/inline：替代 url-loader（強(qiáng)制 base64）
{
test: /\.svg$/,
type: 'asset/inline'
},
// asset/source：替代 raw-loader
{
test: /\.txt$/,
type: 'asset/source'
},
// asset：自動(dòng)選擇（替代 url-loader）
{
test: /\.(png|jpg|gif)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 8 * 1024 // 8KB
}
}
}
]
}
};
五、遷移指南
file-loader → asset/resource
// 舊配置
{
test: /\.(png|jpg)$/,
use: {
loader: 'file-loader',
options: {
name: 'images/[name].[hash:8].[ext]'
}
}
}
// 新配置
{
test: /\.(png|jpg)$/,
type: 'asset/resource',
generator: {
filename: 'images/[name].[hash:8][ext]'
}
}
url-loader → asset
// 舊配置
{
test: /\.(png|jpg)$/,
use: {
loader: 'url-loader',
options: {
limit: 8192,
name: 'images/[name].[hash:8].[ext]'
}
}
}
// 新配置
{
test: /\.(png|jpg)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 8 * 1024
}
},
generator: {
filename: 'images/[name].[hash:8][ext]'
}
}
六、完整配置示例
module.exports = {
module: {
rules: [
// 圖片
{
test: /\.(png|jpg|jpeg|gif)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 10KB
}
},
generator: {
filename: 'images/[name].[hash:8][ext]'
}
},
// SVG
{
test: /\.svg$/,
type: 'asset/inline'
},
// 字體
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
type: 'asset/resource',
generator: {
filename: 'fonts/[name][ext]'
}
},
// 視頻
{
test: /\.(mp4|webm)$/,
type: 'asset/resource',
generator: {
filename: 'videos/[name].[hash:8][ext]'
}
}
]
}
};
到此這篇關(guān)于Webpack file-loader與url-loader深度指南的文章就介紹到這了,更多相關(guān)Webpack file-loader url-loader 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在現(xiàn)代Web開(kāi)發(fā)中,異步編程是不可或缺的一部分,JavaScript通過(guò)多種方式支持異步操作,允許開(kāi)發(fā)者處理非阻塞代碼執(zhí)行,從而提高應(yīng)用性能和響應(yīng)速度,本文給大家介紹了JavaScript異步操作的常見(jiàn)方法,需要的朋友可以參考下2025-01-01
JS數(shù)據(jù)雙向綁定原理與用法實(shí)例分析
這篇文章主要介紹了JS數(shù)據(jù)雙向綁定原理與用法,結(jié)合實(shí)例形式分析了JavaScript數(shù)據(jù)雙向綁定相關(guān)原理、實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-11-11
搜索框，文本框，文本域，文本區(qū)域 可能都要有個(gè)默認(rèn)值2012-01-01
在JavaScript中實(shí)現(xiàn)防抖和節(jié)流的方法詳解
文章介紹了防抖和節(jié)流的基本原理,提供了最常用的防抖和節(jié)流的實(shí)現(xiàn)代碼,并附帶了使用示例,同時(shí),文章還討論了帶立即執(zhí)行的防抖,以及如何快速記憶這兩種技術(shù),最后,文章提出可以為有需要的讀者編寫(xiě)一個(gè)更高級(jí)的防抖節(jié)流版本,需要的朋友可以參考下2026-03-03
js Array對(duì)象的擴(kuò)展函數(shù)代碼
有時(shí)候我們需要對(duì)js的array對(duì)象擴(kuò)展一些功能，這里簡(jiǎn)單介紹下，方便需要的朋友2013-04-04
javascript簡(jiǎn)單實(shí)現(xiàn)類(lèi)似QQ頭像彈出效果的方法
這篇文章主要介紹了javascript簡(jiǎn)單實(shí)現(xiàn)類(lèi)似QQ頭像彈出效果的方法,可實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面元素彈出效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
詳解ES6實(shí)現(xiàn)類(lèi)的私有變量的幾種寫(xiě)法
這篇文章主要介紹了詳解ES6實(shí)現(xiàn)類(lèi)的私有變量的幾種寫(xiě)法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
Symbol 唯一的用途就是標(biāo)識(shí)對(duì)象屬性，表明對(duì)象支持的功能。 這篇文章給大家介紹ES6 Symbol 的用途，感興趣的朋友跟隨小編一起看看吧2018-10-10
js點(diǎn)擊button按鈕跳轉(zhuǎn)到另一個(gè)新頁(yè)面
點(diǎn)擊按鈕怎么跳轉(zhuǎn)到另外一個(gè)頁(yè)面呢？點(diǎn)擊圖片要跳轉(zhuǎn)到新的頁(yè)面時(shí)，怎么做到呢？可以使用onclick=window.location=新頁(yè)面來(lái)實(shí)現(xiàn)2014-10-10
JS實(shí)現(xiàn)簡(jiǎn)單計(jì)數(shù)器
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單計(jì)數(shù)器，有加、減和零三個(gè)按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10