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

 

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

 

經過閱讀本文,你能夠解決如下幾個問題:css

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

 

1、webpack處理圖片 url-loader

1. url-loader 安裝

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

先安裝一下loaderwebpack

npm install url-loader –-save-dev

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

 

2.url-loader 配置

在配置文件中使用url-loader,在module中的css-loader後面添加url-loader:npm

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

 

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

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

 

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

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

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

 

參數說明:

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和圖片的處理

相關文章
相關標籤/搜索