webpack css載入和圖片載入
阿新 • • 發佈：2019-02-19
css載入器
在webpack中，所有的資源（js檔案、css檔案、模板檔案，圖片檔案等等）都被看成是一個模組，因此多有的資源都是可以被載入的。
載入這些資源我們要在module屬性定義這些載入配置（指定載入器）。
在module屬性中，通過定義loaders定義載入器，其屬性值是一個數組，每一個成員代表一個配置。
- 通過test定義匹配的規則（正則表示式）
- 通過loader定義載入器，可以通過！級聯多個載入器
載入css是要兩個載入器，一個是style-loader，一個是css-loader樣式檔案預設載入到head裡面。
我們來看一個小例子
|__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 webpack.config.js
module.exports = {
entry:'./static/app.js',
output:{
filename:'dest/dest.js'
},
module:{
loaders:[
{
// 配置正則表示式，查詢字尾為.css檔案 注意：test引數是正則表示式，不需要加引號，如果寫成test:“/.css$/”會報錯！！！
圖片載入器
在webpack，圖片資源也可以被看成是一個模組，因此也可以用require去載入它們。
但是載入這些圖片，我們需要圖片載入器，圖片載入器叫url-loader
圖片載入比較特殊，有兩種載入方式
- 內嵌式：將圖片嵌入檔案內部（圖片將轉換成base64格式）
- 外鏈式，將圖片作為一個資源嵌入（通過圖片路徑引入）
在webpack中，我們可以在url-loader中定義個limit引數，來決定採取哪種方式引入。
- 語法 url-loader？limit=2048
- ？是用來定義載入器的引數配置的
- Limit表示圖片大小限制
- 2048單位是b，所以2048表示2Kb
這句話的意思是，當圖片小於2KB的時候，我們採取內嵌式載入圖片
當圖片大於2kb的時候我們採取外鏈式。
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
