第二課:webpack配置醒目加載各種靜態資源(圖片,css預處理器)
上一節我們使用webpack來加載了.vue文件,這節課我們使用它加載各種靜態資源,加載靜態資源的方法和加載.vue文件的方法是相同的,即配置loader
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: '\.(gif|jpg|jpeg|png|svg)$',
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]-aaa.[ext]'
}
}
]
}
]
}
css-loader只是幫我們處理了css文件,而css需要寫到html文件中才能正常的起到作用,換言之css-loader只能處理外鏈的css樣式,而內聯樣式和行內樣式它無法處理,這是我們還需要配合使用style-loader來處理所有的css。也就是處理.css需要兩個loader(css-loader、style-loader)。這兩個loader如何書寫呢?方法有兩個:
方法1:使用use配置項替代loader配置項,use接收一個數組,數組中是多個loader
url-loader可以把圖片資源處理成base64編碼的圖片資源寫入js文件,而不用生成一個新的圖片文件。這種方式對于一些小的圖片是比較適用的(比如小于1M的文件),可以減少http請求。但是比較大的圖片就不適用了,因為處理之后的base64代碼會非常多, 無形的增大js文件的體積。
所以在配置圖片處理器的時候,我們向use數組中傳入的是對象,因為該對象有個options配置項,可以為loader配置一些參數,例如上面的limit: 1024,告訴url-loader在處理圖片時小于1024kb的圖片進行base64,超過1024kb的不做處理。
url-loader其實是封裝了一下file-loader,file-loader讀取圖片并且做一些簡單的操作之后,將圖片文件換一個名字然后再換一個地方將其存起來。而url-loader是判斷一下這個文件如果小于1024kb的話,就把這個文件進行base64然后插入到js文件中去。
name用來指定輸出的圖片文件的名字,其中[name]表示原文件名,[ext]表示原文件的后綴
OK,現在我們去安裝這些loader
style-loader url-loader file-loader(安裝file-loader是因為url-loader依賴于file-loader)
安裝完這些loader之后我們就可以在代碼中import進來圖片資源了,現在我們在src目錄下創建assets目錄,該目錄用來存放圖片資源和樣式資源。assets目錄中繼續創建兩個目錄images和styles
images目錄用來存放圖片;
styles目錄用來存放樣式;
我們在styles目錄下創建一個test.css文件:
body {
color: blue;
background-image: url('../images/bg.jpeg');
}
在images目錄下放入一個圖片,這里我放入的是bg.jpeg圖片
接下來在入口文件index.js文件中去import進來test.css文件和bg.jpeg文件
import './assets/styles/test.css'
import ‘./assets/images/bg.jpeg’
神奇之處在于:test.css文件中依賴了bg.jpeg文件,webpack依然會幫我們打包bg.jpeg文件
css文件功能太有限,并且書寫起來非常麻煩,所以我們可以使用css預處理器來解決這些問題,例如sass ,想使用它我們當然也需要配置loader