1.搭建

src下新建img資料夾放入圖片,normal.css檔案中引用圖片

body{
    background-color: red;
    background: url("../img/small.jpg");
}

1.webpack.config.js中引入

 {
                test:/\.(png|jpg|gif|jpeg)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            // 當載入圖片小於limit時，會將圖片編譯成base64字串形式
                            // 當載入圖片大於limit時，需要使用file-loader模組進行載入
                            limit:8192
                        }
                    }
                ]
            }
 

2.安裝url-loader外掛

npm install --save-dev [email protected]

3.處理快取圖片超過限定值時 需要使用此外掛，

npm install --save-dev [email protected]

此外掛會將圖片大於限制的圖片打包至dist資料夾中，而我們引用的圖片還是img中的，此時就需要修改圖片的路徑，但不能引用打包後的路徑，所以在webpack.config.js檔案的output中新增

publicPath:'dist/'

2.執行

npm run build