走近webpack（3）--圖片的處理_ZenDei技術網路在線

上一章，咱們學瞭如何用webpack來打包css，壓縮js等。這一篇文章咱們來學習一下如何用webpack來處理圖片。廢話不多說，咱們開始吧。首先，咱們隨便找一張你喜歡的圖片放到src/images目錄下，然後把圖片設置為背景圖片，代碼是這個樣子。 src/index.html： src/css/ ...

　　上一章，咱們學瞭如何用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來寫樣式了。