webpack css加載和圖片加載的方法示例
css加載器
在webpack中，所有的資源（js文件、css文件、模板文件，圖片文件等等）都被看成是一個(gè)模塊，因此多有的資源都是可以被加載的。
加載這些資源我們要在module屬性定義這些加載配置（指定加載器）。
在module屬性中，通過定義loaders定義加載器，其屬性值是一個(gè)數(shù)組，每一個(gè)成員代表一個(gè)配置。
- 通過test定義匹配的規(guī)則（正則表達(dá)式）
- 通過loader定義加載器，可以通過！級聯(lián)多個(gè)加載器
加載css是要兩個(gè)加載器，一個(gè)是style-loader，一個(gè)是css-loader樣式文件默認(rèn)加載到head里面。
我們來看一個(gè)小例子
|__static |__css |__app.css |__app.js |__ index.html |__webpack.config.js
app.css
h1{
background:red;
width:100px;
height:100px;
color:blue;
}
app.js
require('./css/app.css')
document.write('<h1>hello connie</h1>')
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript" src="dest/dest.js"></script> </body> </html>
webpack.config.js
module.exports = {
entry:'./static/app.js',
output:{
filename:'dest/dest.js'
},
module:{
loaders:[
{
// 配置正則表達(dá)式，查找后綴為.css文件
test:/\.css$/,
// 配置加載器,用！符號級聯(lián)
loader:'style-loader!css-loader'
}
]
}
}
注意：test參數(shù)是正則表達(dá)式，不需要加引號，如果寫成test:“/.css$/”會(huì)報(bào)錯(cuò)！??！
圖片加載器
在webpack，圖片資源也可以被看成是一個(gè)模塊，因此也可以用require去加載它們。
但是加載這些圖片，我們需要圖片加載器，圖片加載器叫url-loader
圖片加載比較特殊，有兩種加載方式
- 內(nèi)嵌式：將圖片嵌入文件內(nèi)部（圖片將轉(zhuǎn)換成base64格式）
- 外鏈?zhǔn)?，將圖片作為一個(gè)資源嵌入（通過圖片路徑引入）
在webpack中，我們可以在url-loader中定義個(gè)limit參數(shù)，來決定采取哪種方式引入。
- 語法 url-loader？limit=2048
- ？是用來定義加載器的參數(shù)配置的
- Limit表示圖片大小限制
- 2048單位是b，所以2048表示2Kb
這句話的意思是，當(dāng)圖片小于2KB的時(shí)候，我們采取內(nèi)嵌式加載圖片
當(dāng)圖片大于2kb的時(shí)候我們采取外鏈?zhǔn)健?/p>
app.css
div{
height: 200px;
width: 200px;
}
.test1{
background-image: url("./images/test1.png");
}
.test2{
background-image: url("./images/test2.jpg");
}
.test3{
background-image: url("./images/test3.png");
}
webpack.config.js
module.exports = {
entry: './static/app.js',
output: {
filename: 'dest/dest.js'
},
module: {
loaders:[
{
// 圖片加載器
test:/\.(png|jpg|gif|jpeg)$/,
loader:'url-loader?limit=2048'
},
{
test:/\.css$/,
loader:'style-loader!css-loader'
}
]
}
}
圖片加載需要安裝url-loader和file-loader
npm install url-loader npm install file-loader
再次查看dest.js
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
根據(jù)分辯率調(diào)用不同的CSS....2007-01-01
這篇文章主要介紹了JavaScript DOM事件(筆記) ,需要的朋友可以參考下2015-04-04
javascript 流暢動(dòng)畫實(shí)現(xiàn)原理
瀏覽器目前來說是沒有抗鋸齒效果的(將來不一定哦)，這樣dom元素外觀的改變就被限制在1個(gè)像素為最佳效果。2009-09-09
將中文編入數(shù)組，調(diào)用數(shù)組的sort方法，再用到一個(gè)localeCompare即可實(shí)現(xiàn)中文排序,需要的朋友可以參考下2014-08-08
在iframe中使bootstrap的模態(tài)框在父頁面彈出問題
這篇文章主要介紹了在iframe中使bootstrap的模態(tài)框在父頁面彈出問題,解決方法非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-08-08
JavaScript 早已不只是一門寫寫網(wǎng)頁特效的腳本語言了，如今廣泛用于網(wǎng)站的前端交互。2011-04-04
Ajax被認(rèn)為是(Asynchronous(異步) JavaScript And Xml的縮寫）,現(xiàn)在允許瀏覽器與服務(wù)器通信而無須刷新當(dāng)前頁面的技術(shù)都被叫做Ajax,下面這篇文章主要給大家介紹了關(guān)于ajax在js中和jQuery中的用法,需要的朋友可以參考下2021-08-08
本篇文章主要介紹了webpack中的熱刷新與熱加載的區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
JS字符串補(bǔ)全方法padStart()和padEnd()
這篇文章主要介紹了JS字符串補(bǔ)全方法padStart()和padEnd()，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
JavaScript實(shí)現(xiàn)時(shí)鐘功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)時(shí)鐘功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06