從0到上線開發企業級電商項目_前端_11_webpack對icon-font和圖片的處理

 

在以前的文章中咱們已經完成了webpack對於腳本、css、html的處理。

 

經過閱讀本文，你能夠解決如下幾個問題：

• webpack如何處理圖片
• webpack如何處理字體文件

 

1、webpack處理圖片 url-loader

1. url-loader 安裝

其實處理字體和圖片，使用一個url-loader就能夠了。

先安裝一下loader

npm install url-loader –-save-dev

顯示安裝成功，這裏不用像以前去找包，所以不用理會WARN，那是告訴你npm 3不會安裝所依賴的包。

 

2.url-loader 配置

在配置文件中使用url-loader，在module中的css-loader後面添加url-loader：

module: {
    loaders: [
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader",
            "css-loader")
        },
        {
            test: /\.(gif|png|jpg)\??.*$/,
            loader: 'url-loader'
        }

 

修改src -> page ->index ->index.css隨便引入一張圖片。

body{
    background: url('../../image/test-image.jpg');
}

 

以後執行webpack咱們看到執行結果

圖片引入進來了，可是顯示的是base64格式的，接下來咱們使其顯示圖片名字，經過配置url-loader的參數能夠實現這個功能。把以前的url-loader的配置進行修改

 {
   test: /\.(gif|png|jpg)\??.*$/,
   loader: 'url-loader?limit=100&name=resource/[name].[ext]'
 }

 

參數說明：

limit:顯示文件的大小，小於這個值就會被打包成剛纔看到的base64的格式，而大於這個值的話就會以文件的形式進行打包，

&name=resource：而且把它放在resouce

[name].[ext]：文件的名字+擴展名，這樣打包的話擴展名不會發生改變。

 

2、webpack對字體的處理

    前面已經提到了webpack對字體和圖片都是使用咱們剛纔的url-loader來處理，

其實處理字體只要再加上幾個字體的格式就能夠了。加上woff|svg|eot|ttf便可：

 

{
    test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/,
    loader: ‘url - loader ? limit = 100 & name = resource / [name]. [ext]’
}

 

 

 

 

3、參考資料

1.webpack對icon-font和圖片的處理