webpack編譯后的html中圖片路徑變為[object Module]的原因及解決辦法

問題緣由

在html模板頁面中我們有時候要直接插入圖片img。如果直接寫絕對路徑例如<img src="https://static.yidongtimes.com/dist/mobile/v2/img/notice/fishingTips/waiting.png" alt="">，頁面可以訪問到圖片但是圖片不經過webpack處理（壓縮，添加哈希后綴等）。這樣操作圖片也不能作為資源一起編譯處理到dist文件夾中。因此需要找到更好的解決辦法

提出問題

html中如何正確的引入圖片供webpack編譯？

解決辦法

方法一：
采用以下方式引入圖片

<img src="${require('../../../../../../static_audio/src/mobile/v2/img/notice/fishingTips/waiting.png')}" alt="">

這樣引入的圖片可經過file-loader處理
方法二：
采用以下方式引入圖片

<img src="../../../../../../static_audio/src/mobile/v2/img/notice/fishingTips/waiting.png" alt="">

使用html-loader和file-loader處理

rules: [{
        test: /\.(html)$/,
        use: {
            loader: 'html-loader',
            options: {
                attrs: ['img:src'],
            }
        }
    },
    {
        test: /\.(png|svg|jpg|gif)$/,
        use: [{
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: "assets/",   //輸出圖片放置的位置
                publicPath: './asserts', //html的img標簽src所指向圖片的位置，與outputPath一致
            }
        }]
    }
]

這里由於我們在項目中用的是ejs模板，我們采取第一種方法

發現問題

按照上面的寫法引入圖片之后發現圖片變成了<img src="[object Module]" alt="">,在stackoverflow中查找資料發現原來是file-loader版本過高導致的，esModule選項已在4.3.0版本的文件加載器中引入，而在5.0.0版本中，默認情況下已將其設置為true。問題地址When i using file-loader and html-loader in webpack. The src attr of image gonna be like '[object Module]'

解決方法一

安裝4.3.0以下版本的file-loader,這里我安裝的是4.2.0

yarn add file-loader@4.2.0 --dev

解決方法二

使用4.3.0以上版本的file-loader,需設置esModule: false

{
    test: /\.(jpeg|jpg|png)$/,
    use: [
      loader: 'file-loader',
      options: {
        esModule: false
      }
    ]
}

參考資料
webpack踩坑記錄
When i using file-loader and html-loader in webpack. The src attr of image gonna be like '[object Module]'