走近webpack（3）–圖片的處理

　　上一章，我們們學瞭如何用webpack來打包css，壓縮js等。這一篇文章我們們來學習一下如何用webpack來處理圖片。廢話不多說，我們們開始吧。

　　首先，我們們隨便找一張你喜歡的圖片放到src/images目錄下，然後把圖片設定為背景圖片，程式碼是這個樣子。

src/index.html：

<div id="title"></div>
<div id="name"></div>
<div id="img"></div>
<script src="./entry1.js"></script>
<script src="./entry2.js"></script>

src/css/index.css：

body{
   background:red; 
}
#title{
  background:orange;  
  color:blue;      
}
#img{
    background: url(../images/dog.jpg);
    width: 500px;
    height: 500px;
}

　　ok,我們寫完了程式碼，現在webpack是無法解析的，我們可以打包試一下，發現會報錯。嗯，沒有加入loader肯定會報錯的！

　　那麼，接下來我們來安裝一下打包圖片需要用到的loader：

npm install --save-dev file-loader url-loader

　　在等待安裝之際，我們先解釋一下這兩個loader分別都是做什麼的：

　　file-loader：解決引用路徑的問題，拿background樣式用url引入背景圖來說，我們都知道，webpack最終會將各個模組打包成一個檔案，因此我們樣式中的url路徑是相對入口html頁面的，而不是相對於原始css檔案所在的路徑的。這就會導致圖片引入失敗。這個問題是用file-loader解決的，file-loader可以解析專案中的url引入（不僅限於css），根據我們的配置，將圖片拷貝到相應的路徑，再根據我們的配置，修改打包後檔案引用路徑，使之指向正確的檔案。

　　url-loader：如果圖片較多，會發很多http請求，會降低頁面效能。這個問題可以通過url-loader解決。url-loader會將引入的圖片編碼，生成dataURl。相當於把圖片資料翻譯成一串字元。再把這串字元打包到檔案中，最終只需要引入這個檔案就能訪問圖片了。當然，如果圖片較大，編碼會消耗效能。因此url-loader提供了一個limit引數，小於limit位元組的檔案會被轉為DataURl，大於limit的還會使用file-loader進行copy。其實簡單來說，url-loader的作用就是根據配置來判斷圖片是否需要轉換成字串編碼，來使專案的效能和速度更快。

　　那麼，接下來我們在module中配置一下loader，現在我們的module看起來是這樣的，其中limit引數就是用來判斷需要把圖片轉換成字串編碼的大小範圍，單位是B。

module:{
        rules: [
            {
              test: /.css$/,
              use: [ `style-loader`, `css-loader` ]
            },{
               test:/.(png|jpg|gif)/ ,
               use:[{
                   loader:`url-loader`,
                   options:{
                       limit:500000
                   }
               }]
            }
          ]
    },

　　唉？不對啊，你安裝了兩個loader，為什麼只用了url-loader啊？！因為url-loader內建了file-loader。這裡安裝file-loader是為了方便下面用到的時候不用再安裝了。

　　OK，我們們來打包一下看看會發生什麼吧。開啟頁面發現我們引入的圖片已經顯示了。

　　下面說一下怎麼把css從js中分離出來，我們上面的css都是通過import引入到js中再進行打包的，這樣不利於維護，也違背了js，css，html互相分離的基本原則。但是一旦分離了css，那麼原本的圖片路徑就會出現問題。我們下面來解決一下。但是webpack官方認為css就應該打包進js中以減少http請求。所以，仁者見仁智者見智，怎麼做看具體情況來選擇吧。

　　其實要解決這個問題很簡單，用外掛，extract–text–webpack–plugin。怎麼安裝就不說了，已經說了好多遍了，跟上面的安裝方法一樣，改個名字而已。

　　既然是外掛，我們就需要在config中引入並且new一個例項之後才可以使用：

module:{
    rules: [
        {
          test: /.css$/,
/*修改了一下使用的方式*/
          use: extractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
          })
        },{
           test:/.(png|jpg|gif)/ ,
           use:[{
               loader:`url-loader`,
               options:{
                   limit:500000
               }
           }]
        }
      ]
},
//外掛，用於生產模版和各項功能
plugins:[
    new uglify(),
    new htmlPlugin({
        minify:{
            removeAttributeQuotes:true
        },
        hash:true,
        template:`./src/index.html`
       
    }),
/*這裡new了一個外掛的例項*/
    new extractTextPlugin("css/index.css")
],

　　ok,我們興致勃勃地去打包一下，竟然報錯了，報錯的主要原因是extract–text–webpack–plugin當前還沒有支援webpack4.x，那麼我們該怎麼辦呢？別急，我們們想想辦法解決：

npm install --save-dev extract-text-webpack-plugin@next
/*更新版本*/

　　這樣就可以打包了，但是我們打包完成之後發現index.html並沒有引入相應的css，頁面沒有任何css，別急，我們來進行下一步解決這個問題。

　　我們在config中定義一個路徑變數：

var webpath={
    publicPath:"http://192.168.199.124:9090/"
}
/*就是你在devServer中定義的host和埠*/

　　然後在output屬性中定義一個publicPath屬性：

output:{
    path:path.resolve(__dirname,`dist`),
    filename:`[name].js`,
    publicPath:webpath.publicPath
},

　　並且要把之前配置在devServer中的host修改成你自己的本機host，我的是http://192.168.199.124，如果你不知道，可以在cmd中使用ipconfig來查詢。

　　然後，我們npm run server一下，發現開啟的頁面已經有圖片和樣式了。

　　那麼我們就學會了如何處理css中的圖片問題，下面我們學習一下如何處理html中的圖片（也是用外掛，各種外掛，你可以去github隨便找一個你喜歡的可以處理這中問題型別的外掛）：

　　這裡我們使用html–withimg–loader，然後在config中如下配置：

npm install html-withimg-loader --save
/*因為在生產環節中也需要用到，所以使用--save命令*/

{
    test: /.(htm|html)$/i,
     use:[ `html-withimg-loader`] 
}

　　完事了。。。。。。簡單吧。

　　前邊的內容，打包後的圖片並沒有放到images資料夾下，要放到images資料夾下，其實只需要配置我們的url-loader選項就可以了。前面也說到了，要限制limit的大小，不然圖片在小於limit的範圍內會進行轉碼，我們們來小小的修改下程式碼就可以了：

{
   test:/.(png|jpg|gif)/ ,
   use:[{
       loader:`url-loader`,
       options:{
           limit:500,
           outputPath:`images/`
       }
   }]
}

　　我們在src/index.html中加入一個圖片的引入：

<div id="title"></div>
<div id="name"></div>
<div id="img"></div>
<!-- 通過src引入圖片 -->
<img id="htmlImg" src="./images/dog.jpg">

　　然後在src/css/index.css下寫上這樣的css：

body{
   background:red; 
}
#title{
  background:orange;  
  color:blue;      
}
#img{
    background: url(../images/dog.jpg);
    width: 500px;
    height: 500px;
}
/*設定圖片大小*/
#htmlImg{
    width: 500px;
    height: 500px;
}

　　然後我們npm run server一下看看結果吧。這裡說明一下，可能細心的小夥伴會問，為什麼以前打包用npm run build 而這裡用npm run server呢？

　　通常情況下，我們有兩種環境，一種是dev，一種是prod，也就是開發環境和生產環境，一般在開發環境下，我們本地會通過webpack-dev-server通過express起一個node伺服器，而不是真正的打包，而我們以前所一起學習的webpack使用方法即包含了開發環境下的需求，又有生產環境下的內容，當我們要把整個專案打包上線的時候，我們會壓縮js，壓縮圖片，整合資源以減少http請求，但是我們在開發環境下的時候，往往需要更多的功能以使程式碼更容易閱讀和debug。再有就是，我們在引入圖片的時候，用的是絕對地址，也就是node起伺服器後你本地的ip地址，如果不通過npm run server起本地伺服器，是無法找到圖片的。有興趣的小夥伴可以試試npm run build然後手動開啟dist下的html看看效果。

　　至此，圖片的處理方式就結束了。下一章我們們來看看怎麼處理less啊，sass這樣的css預編譯語言，畢竟現在很少用css來寫樣式了。

一隻想要飛得更高的小菜鳥