file-loader打包圖片文件時路徑錯誤輸出為[object-module]怎么辦

小編給大家分享一下file-loader打包圖片文件時路徑錯誤輸出為[object-module]怎么辦，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

最近在學習使用webpack4.0自己搭建vue腳手架，在搭建過程中，踩了許多坑，使用file-loader打包圖片文件時就遇到了以下的問題。

這是我的webpack 處理打包圖片相關配置項：

...
module: {
 rules: [
 ...
 {
  test: /\.(jpe?g|png|gif|svg)$/i,
  use: [
  {
   loader: 'url-loader',
   options: {
   limit: 10000,
   name: '[name].[ext]',
   outputPath: 'imgs/'
   }
  }
  ]
 },
 ...
 ]
}
...

這個配置也是和目前網上教程差不多的。使用 url-loader 編譯圖片文件，輸出到imgs文件夾下，乍一看也沒什么問題，我相信你也是這么認為的。

但是webpack構建之后，會發現，頁面上引用的圖片都無法正常顯示：

圖片引用錯誤

打開控制臺，會發現所有圖片的路徑都變成了 [object module]

object module

經過一番努力的探索，終于在stackoverflow上找到了 相應的問題

下方回答我翻譯下：

默認情況下，file-loader生成使用ES模塊語法的JS模塊。在某些情況下，使用ES模塊是有益的，比如在模塊連接和樹抖動的情況下。

file-loader-options

簡而言之就是file-loader新版本默認使用了esModule語法，造成了引用圖片文件時的方式和以前的版本不一樣，通過查看其倉庫的release會發現：在v4.3.0版本就引入這一新特性。

file-loader-versions

那如何解決這一問題呢？在剛才的stackoverflow問題回答里說明了有兩種解決方法：

在引用圖片時，加個 .default 后綴

<img src="require('assets/logo.png').default"/>

在webpack的file-loader配置項里，設置esModule為false

{
 test: /\.(jpe?g|png|gif|svg)$/i,
 use: [
 {
  loader: 'file-loader',
  options: {
  esModule: false
  }
 }
 ]
}

兩種方法對比起來，顯而易見，相信你已經知道了哪個方法更好用。于是我修改了webpack配置后，再編譯，就沒問題啦:wink:。

build-success

看完了這篇文章，相信你對“file-loader打包圖片文件時路徑錯誤輸出為[object-module]怎么辦”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！