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

?

轉載于:https://www.cnblogs.com/zaking/p/8593897.html

總結

以上是生活随笔為你收集整理的走近webpack（3）--图片的处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。