webpack打包 html模板中img路徑亂碼問題

1、問題描述

今天平常檢查網站時發現一個404錯誤，錯誤信息以下。

而後發如今webpack構建後的一個js裏面的圖片連接是個亂碼。

<img src="" class="service__chat__photo">
複製代碼

2、問題緣由

咦，怎麼回事呢？ 爲啥源碼的src爲空，線上構建後是個亂碼呢？ 是否是代碼沒同步呢？ 小編果斷更新本地代碼，而後再構建下，構建後dist目錄仍是亂碼連接。那是隻有多是webpack構建過程當中致使的亂碼。
查看webpack的配置文件，配置文件以下，該只有一個 html-loader 會處理該文件，因此確定html-loader用的有點問題。

{
    test: /\.tmpl$/,
    exclude: /node_modules/,
    use: [{
        loader: 'html-loader',
        options: {
            minimize: false,
            interpolate: true
        }
    }]
}
複製代碼

上webpack官網查html-loader發現，html-loader的官網解釋以下：

默認狀況下，每一個本地的 img 標籤都須要經過 require （require('./image.png')）來進行加載。你可能須要在配置中爲圖片指定 loader（推薦 file-loader 或 url-loader ） 你能夠經過查詢參數 attrs，來指定哪一個標籤屬性組合(tag-attribute combination)應該被此 loader 處理。傳遞數組或以空格分隔的 : 組合的列表。（默認值：attrs=img:src）

原來html-loader默認都會對img標籤的src屬性，require去解析src對應的連接。,因此咱們頁面中的src=""被解析成了src="xxxHTMLLINKxxx0.255155626507101550.49119297348931346xxx"

3、解決辦法

那怎麼解決呢？ 咱們能夠把html中的attrs設置爲false，修改後的配置以下。

{
    test: /\.tmpl$/,
    exclude: /node_modules/,
    use: [{
        loader: 'html-loader',
        options: {
            minimize: false,
            interpolate: true,
            attrs: false
        }
    }]
}
複製代碼

這樣webpack在構建過程就不會再去加載處理咱們的src屬性。 可是有的小夥伴有會問，個人圖片圖片路徑有些須要webpack去處理，有些不須要怎麼辦呢？也是有辦法的，須要webpack處理的圖片連接使用${require('~assets/xxx.png')}。具體代碼以下。

<!-- 須要webpack處理的連接 -->
<img src="${require('~assets/components/serviceBar/chat_bg.jpg')}" class="service__chat__photo">

<!-- 不須要webpack處理的圖片連接 -->
<img src="./test.png" class="service__chat__photo">
複製代碼

構建後的結果爲：

<img src=\"" + __webpack_require__(230) + "\" class=\"service__chat__photo\">\n <img src=\"./test.png\" class=\"service__chat__photo\">\n 複製代碼

attrs屬性還能夠指定img的某個屬性須要通過require的處理。 這個大有用處的。好比說咱們頁面圖片太多，要使用懶加載，懶加載讀取的是data-src的屬性。咱們就能夠設置attrs:[:data-src]，在模板上data-src屬性使用相對路徑，webpack會自動去處理咱們的依賴。