webpack css加載和圖片加載的方法示例
css加載器
在webpack中，所有的資源（js文件、css文件、模板文件，圖片文件等等）都被看成是一個(gè)模塊，因此多有的資源都是可以被加載的。
加載這些資源我們要在module屬性定義這些加載配置（指定加載器）。
在module屬性中，通過(guò)定義loaders定義加載器，其屬性值是一個(gè)數(shù)組，每一個(gè)成員代表一個(gè)配置。
- 通過(guò)test定義匹配的規(guī)則（正則表達(dá)式）
- 通過(guò)loader定義加載器，可以通過(guò)！級(jí)聯(lián)多個(gè)加載器
加載css是要兩個(gè)加載器，一個(gè)是style-loader，一個(gè)是css-loader樣式文件默認(rèn)加載到head里面。
我們來(lái)看一個(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$/,
// 配置加載器,用！符號(hào)級(jí)聯(lián)
loader:'style-loader!css-loader'
}
]
}
}
注意：test參數(shù)是正則表達(dá)式，不需要加引號(hào)，如果寫(xiě)成test:“/.css$/”會(huì)報(bào)錯(cuò)?。?！
圖片加載器
在webpack，圖片資源也可以被看成是一個(gè)模塊，因此也可以用require去加載它們。
但是加載這些圖片，我們需要圖片加載器，圖片加載器叫url-loader
圖片加載比較特殊，有兩種加載方式
- 內(nèi)嵌式：將圖片嵌入文件內(nèi)部（圖片將轉(zhuǎn)換成base64格式）
- 外鏈?zhǔn)?，將圖片作為一個(gè)資源嵌入（通過(guò)圖片路徑引入）
在webpack中，我們可以在url-loader中定義個(gè)limit參數(shù)，來(lái)決定采取哪種方式引入。
- 語(yǔ)法 url-loader？limit=2048
- ？是用來(lái)定義加載器的參數(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
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)橫屏和豎屏簽名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
本文主要介紹了拖動(dòng)時(shí)防止選中的小知識(shí)點(diǎn)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
基于JS實(shí)現(xiàn)仿百度百家主頁(yè)的輪播圖效果
本文給大家分享基于html和js實(shí)現(xiàn)的仿百度百家主頁(yè)的輪播圖效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-03-03
JS倒計(jì)時(shí)兩種實(shí)現(xiàn)方式代碼實(shí)例
這篇文章主要介紹了JS倒計(jì)時(shí)兩種實(shí)現(xiàn)方式代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
JS實(shí)現(xiàn)圖片延遲加載并淡入淡出效果的簡(jiǎn)單方法
我們大家都知道，對(duì)于一個(gè)網(wǎng)站最占用帶寬，最影響頁(yè)面顯示速度的東西就是圖片。圖片是很重要的，作為一個(gè)站長(zhǎng)我們是千方百計(jì)的使用各種技巧來(lái)優(yōu)化圖片，但其實(shí)有一種簡(jiǎn)單的方法，只需要幾行代碼就能達(dá)到這種效果。同時(shí)還附加一種淡入淡出的顯示效果，下面一起來(lái)看看。2016-08-08
這篇文章主要介紹了JavaScript使用yield模擬多線程的方法,實(shí)例分析了javascript多線程的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
用js實(shí)現(xiàn)預(yù)覽待上傳的本地圖片
用js實(shí)現(xiàn)預(yù)覽待上傳的本地圖片...2007-03-03
bootstrap-Treeview實(shí)現(xiàn)級(jí)聯(lián)勾選
這篇文章主要為大家詳細(xì)介紹了bootstrap-Treeview實(shí)現(xiàn)級(jí)聯(lián)勾選，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
JS+Ajax+Jquery實(shí)現(xiàn)頁(yè)面無(wú)刷新分頁(yè)以及分組 超強(qiáng)的實(shí)現(xiàn)
JS+Ajax+Jquery實(shí)現(xiàn)頁(yè)面無(wú)刷新分頁(yè)以及分組 超強(qiáng)的實(shí)現(xiàn) 加上你的CSS完全可以與EXT媲美哦2009-08-08
高性能JavaScript循環(huán)語(yǔ)句和條件語(yǔ)句
這篇文章主要為大家介紹了高性能JavaScript循環(huán)語(yǔ)句和條件語(yǔ)句，感興趣的小伙伴們可以參考一下2016-01-01