如何使用webpack 打包圖片

最近在學習vue,需要用到webpack打包css,在webpack中文網https://www.webpackjs.com/里只有css的打包配置，

在編寫css樣式時，因為要引入 背景圖片，打包時webpack就會報錯，css樣式如下：

使用webpack打包時報的錯誤如下圖：

開始以為是自己的圖片路徑寫錯了，又仔細的閱讀了下webpack的loader ，才知道是圖片的url路沒有配置，那么loader到底是什么呢？

webpack中文網上的解釋如下：

看完之后，，還是不懂。。。。。。。。

 

不得已，只好去webpack官網找答案了，http://webpack.github.io/docs/usage.html，憑借着我不屈不撓的精神，終於在官網里找到一一句“有很多不同的裝載器，你可以用來包括文件在你的應用程序包，包括CSS和圖像加載器”，簡直是我的救命草啊，點擊“裝載器”

進入到裝載器列表頁，找到打包，如下：

原來在 webpack 中引入圖片需要依賴 url-loader 這個加載器。既然找到原因了，那么問題就好辦了，只要引入就行來：

  1、安裝URL-loader 加載器

npm install url-loader --save-dev          

 2、配置webpack的config.js 文件

module: {
        loaders: [
            {
                test: /\.css$/, 
                loader: 'style-loader!css-loader'
            },
            { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'},
            { test: /\.png$/, loader: "file-loader?name=images/[hash:8].[name].[ext]" }
        ],

    }

test 屬性代表可以匹配的圖片類型，除了 png、jpg 之外也可以添加 gif 等，以豎線隔開即開。

loader 后面 limit 字段代表圖片打包限制，這個限制並不是說超過了就不能打包，而是指當圖片大小小於限制時會自動轉成 base64 碼引用。上例中大於8192字節的圖片正常打包，小於8192字節的圖片以 base64 的方式引用。

url-loader 后面除了 limit 字段，還可以通過 name 字段來指定圖片打包的目錄與文件名

3、輸入打包命令，運行結果如下：

4、打包前我的項目目錄如下：

5、打包后images里生成了一個打包后的圖片：

 參考文檔：webpack中文網http://webpackdoc.com/loader.html

　　　　　　webpack 官網http://webpack.github.io/docs/