webpack 打包後 圖片名稱不一致導致頁面上圖片404問題

webpack 打包後 圖片名稱不一致導致頁面上圖片404問題

webpack 中使用 html-loader (| html-withimg-loader) 和 html-webpack-plugin時，打包後，image文件夾中圖片的名字被轉化，但是index.html img src使用的圖片名字名字仍然是打包前圖片的名字

打包後圖片的名字：

打包後html 中引入的名字：

導致頁面圖片404了

解決 原來是需要再url-loader中進行一下圖片名字的配置就可以了

另外：
webpack 默認不支持在html中使用 img src引用圖片的，所以需要另外使用插件或者loader進行配置（這裏"html-withimg-loader" 和 “html-loader”都進行了嘗試）
前提： 確定使用哪一個後，需要進行 npm install xxx

{
   test: /\.(htm|html)$/i,
   use: ["html-withimg-loader"]
 }

或者

{
   test: /\.(htm|html)$/,
   use: {
     loader: 'html-loader',
     options: {
       attrs: [':data-src', ":src"]
     }
   }
 }

配置後，就可以在頁面中使用了。

雖然解決了問題，但是仍有疑問如下：

奇怪，我之前使用過html-withimg-loader,沒有出現過這個問題，並且我現在的代碼跟之前的代碼是一樣的。後來經過查詢原來是使用的babel版本導致的問題
我現在使用的是babel7版本了，之前用的是老版本。如圖：