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

通過閱讀本文，你可以解決以下幾個問題：

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

一、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]：文件的名字+擴展名，這樣打包的話擴展名不會發生改變。

二、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]’
}

三、參考資料

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

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