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

這是我的webpack 處理打包圖片相關(guān)配置項：

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

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

但是webpack構(gòu)建之后，會發(fā)現(xiàn)，頁面上引用的圖片都無法正常顯示：

圖片引用錯誤

打開控制臺，會發(fā)現(xiàn)所有圖片的路徑都變成了 [object module]

object module

經(jīng)過一番努力的探索，終于在stackoverflow上找到了 相應(yīng)的問題

下方回答我翻譯下：

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

file-loader-options

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

file-loader-versions

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

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

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

在webpack的file-loader配置項里，設(shè)置esModule為false

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

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

build-success

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。