走近webpack(3)--圖片的處理

来源:https://www.cnblogs.com/zaking/archive/2018/03/24/8593897.html
-Advertisement-
Play Games

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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本文為mariadb官方手冊:SELECT INTO的譯文。 原文:https://mariadb.com/kb/en/selectinto/我提交到MariaDB官方手冊的譯文:https://mariadb.com/kb/zh-cn/selectinto/ 語法 描述 使用SELECT ... ...
  • 類添加屬性 Property.h 文件 Property.m 中 #import "NSObject+Property.h" #import <objc/runtime.h> /** 擴展類(分類)添加屬性: a. 變數生成set,get方法的申明,不會生成實現,需要自己去寫實現方法,也不會生成帶下 ...
  • Expo大作戰系列完結! 簡要:本系列文章講會對expo進行全面的介紹,本人從2017年6月份接觸expo以來,對expo的研究斷斷續續,一路走來將近10個月,廢話不多說,接下來你看到內容,講全部來與官網 我猜去全部機翻+個人修改補充+demo測試的形式,對expo進行一次大補血!歡迎加入expo興 ...
  • 簡要:本系列文章講會對expo進行全面的介紹,本人從2017年6月份接觸expo以來,對expo的研究斷斷續續,一路走來將近10個月,廢話不多說,接下來你看到內容,講全部來與官網 我猜去全部機翻+個人修改補充+demo測試的形式,對expo進行一次大補血!歡迎加入expo興趣學習交流群:597732 ...
  • 一、RunTime簡介 RunTime簡稱運行時。OC就是運行時機制,也就是在運行時候的一些機制,其中最主要的是消息機制。 對於C語言,函數的調用在編譯的時候會決定調用哪個函數。 對於OC的函數,屬於動態調用過程,在編譯的時候並不能決定真正調用哪個函數,只有在真正運行的時候才會根據函數的名稱找到對應 ...
  • GCD多線程的一個面試題 圖片:2.png 圖片:6.png 圖片:4.png ...
  • 現象 在android開發中,經常會需要替換res\drawable中的圖片,打開res\layout下的文件預覽佈局頁面發現圖片已經被替換,但在模擬器或者真實機器上運行時發現該圖片並沒有被替換,還是使用的是原來的資源圖片。 原因 在開發過程中,由於使用模擬器測試了程式,在首次運行後會將res文件夾 ...
  • 最近在讀javascript高級程式設計,讀第十三章的時候有感。 開發中經常考慮的事情就是相容性,樣式相容,腳本相容等~~ 經常考慮的對象常為: DOM 與 IE (這裡的dom對象我理解為ie9,Firefox,chrome,safari,opera以上。IE則為ie8及以下) 首先介紹 事件流: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...