Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源。

一、處理圖片文件

默認(rèn)webpack無法處理css文件中的url地址 在打包時(shí)會報(bào)錯(cuò)
無論是圖片還是字體庫 只要是url地址 都無法處理

解決方法：

在項(xiàng)目根目錄下輸入cnpm i url-loader file-loader -D
安裝url-loader和file-loader
(url-loader內(nèi)部依賴于file-loader)

然后在配置文件webpack.config.js中進(jìn)行配置loader：

var path=require("path")
var htmlWebpackPlugin=require("html-webpack-plugin")

module.exports={
 entry:path.join(__dirname,"./src/main.js"),
 output:{
 path:path.join(__dirname,"./dist"),
 filename:"bundle.js"
 },
 // 所有webpack插件的配置節(jié)點(diǎn)
 plugins:[
 new htmlWebpackPlugin({
  template:path.join(__dirname,"./src/index.html"),
  filename:"index.html"
 })
 ],
 // 配置第三方loader模塊
 module:{
 rules:[
  // 第三方模塊的匹配規(guī)則
  {test:/\.css$/,use:["style-loader","css-loader"]}, // 處理css文件的loader
  {test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader"} // 處理圖片url的loader
 ]
 }
}

使用url-loader打包之后 在頁面中 默認(rèn)會將路徑以base64編碼 減少圖片的二次請求

關(guān)閉默認(rèn)的以base64編碼：

進(jìn)行配置：
給url-loader傳參 格式和網(wǎng)頁url地址傳參完全一致 在url-loader后面加問號傳遞參數(shù)即可
屬性名：limit
設(shè)定一個(gè)大小范圍 當(dāng)圖片大于或等于給定的limit值(單位byte) 則不將url轉(zhuǎn)換為base64格式 反之進(jìn)行轉(zhuǎn)換
格式：{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=圖片大小"}

如何查看圖片大?。?/p>

右擊圖片 - 屬性

注：若圖片長度大于三位 每三位要以逗號進(jìn)行分隔
496886要寫成496,886
例：{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=496,886"}

若不進(jìn)行base64的轉(zhuǎn)換

圖片的名稱會默認(rèn)變成一串Hash字符串 以防止圖片重名

可通過配置 不使用默認(rèn)的改名為Hash字符串：
在url-loader后面加上name=[name].[ext]即可
[name]意為：之前是什么名稱 打包之后也叫什么名稱
[ext]意為：之前是什么后綴名 打包之后也叫什么后綴名

例：{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=496,886&name=[name].[ext]"}

否則 由于打包后的url引用的直接是文件名.后綴名的格式 若有重名的圖片 即使不在同一個(gè)文件夾下
也會出現(xiàn)引入的圖片重復(fù)
為避免此問題 需要將名稱改為不重復(fù)的

若既要不改文件名 又要避免圖片重復(fù)問題
可配置為：{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=496,886&name=[hash:8]-[name].[ext]"}
name=[hash:8]-[name].[ext]的意思是：在圖片前面帶上32位hash值的前8位 中間用短橫杠進(jìn)行連接 具體的hash值長度可根據(jù)需要設(shè)置 但不能超過32 因?yàn)閔ash值最大只有32位

二、處理字體文件

在main.js里引入字體文件：

若通過路徑的形式引入node_modules中相關(guān)的文件 可省略node_modules
若不寫node_modules 默認(rèn)會從node_modules里查找

例：
bootstrap.css文件在node_modules/bootstrap/dist/css下
但在引入的時(shí)候 可以這么寫：

import "bootstrap/dist/css/bootstrap.css"

然后 同樣 在webpack.config.js中進(jìn)行配置即可：
字體文件也是使用url-loader進(jìn)行處理

var path=require("path")
var htmlWebpackPlugin=require("html-webpack-plugin")

module.exports={
 entry:path.join(__dirname,"./src/main.js"),
 output:{
 path:path.join(__dirname,"./dist"),
 filename:"bundle.js"
 },
 // 所有webpack插件的配置節(jié)點(diǎn)
 plugins:[
 new htmlWebpackPlugin({
  template:path.join(__dirname,"./src/index.html"),
  filename:"index.html"
 })
 ],
 // 配置第三方loader模塊
 module:{
 rules:[
  // 第三方模塊的匹配規(guī)則
  {test:/\.css$/,use:["style-loader","css-loader"]},
  {test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=496,886&name=[hash:8]-[name].[ext]"},
  {test:/\.ttf|eot|svg|woff|woff2$/,use:"url-loader"} // 處理字體文件的loader
 ]
 }
}

到此這篇關(guān)于在Webpack中用url-loader處理圖片和字體的文章就介紹到這了,更多相關(guān)在Webpack中用url-loader處理圖片和字體內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！