前言：

本文演示了

1. webpack如何在css文件中引入圖片；
2. webpack如何在html中引入圖片；

需要安裝配置的loader: file-loader;

為何要使用file-loader：

如果我們希望在頁面引入圖片（包括img的src和background的url）。當(dāng)我們基于webpack進(jìn)行開發(fā)時(shí)，引入圖片會(huì)遇到一些問題。

其中一個(gè)就是引用路徑的問題。拿background樣式用url引入背景圖來說，我們都知道，webpack最終會(huì)將各個(gè)模塊打包成一個(gè)文件，因此我們樣式中的url路徑是相對(duì)入口html頁面的，而不是相對(duì)于原始css文件所在的路徑的。這就會(huì)導(dǎo)致圖片引入失敗。這個(gè)問題是用file-loader解決的，file-loader可以解析項(xiàng)目中的url引入（不僅限于css），根據(jù)我們的配置，將圖片拷貝到相應(yīng)的路徑，再根據(jù)我們的配置，修改打包后文件引用路徑，使之指向正確的文件。

安