配置檔案（webpack.config.js）

1. limit = 後面跟的是數字，加上這個引數，圖片檔案大小（單位為byte）將小於8192byte的圖片轉成base64編碼的形式，減少http請求。

2. name 是表示檔案被處理之後再目錄中的路徑和圖片生成規則

3. 以下三個引數可以自由組合，改變圖片被處理有生成的檔名等資訊
[name]表示圖片檔案的檔名
[ext]表示圖片檔案的副檔名
[hash]表示圖片檔案的雜湊值

module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + '/demo/js/main.js'
 
, //入口檔案
    output: { //輸出檔案
        filename: 'index.js', //輸出檔名
        path: __dirname + '/out', //輸出檔案路徑
        publicPath:'out/'  //指定靜態資源 (圖片等) 的釋出地址
    },
    module: {
        // rules為陣列，儲存每個載入器的配置
        rules: [
            //解析圖片
            {   
                test: /.(jpg|png|gif|svg)$/,
            　　loader: 'url-loader?limit=8192&name=[name].[ext]?[hash]'
 
      
            }　　　
        ]　
    }
}

注：publicPath它用來指定靜態資源 (圖片等) 的釋出地址, 當配置過該屬性後，打包檔案 (也就是index.js) 中所有通過相對路徑引用的資源都會被配置的路徑所替換。

main.js中引入圖片

將圖片放置於 .\demo\img\下後編輯main.js

//main.js

var oImg = new Image();
oImg.src = require('../img/welcometocat.png');//當成模組引入圖片
document.body.appendChild(oImg);
 

webpack一下即可~