file-loader打包圖片文件時路徑錯誤輸出為[object-module]的解決方法
最近在學(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文件夾下，乍一看也沒什么問題，我相信你也是這么認(rèn)為的。
但是webpack構(gòu)建之后，會發(fā)現(xiàn)，頁面上引用的圖片都無法正常顯示：
圖片引用錯誤
打開控制臺，會發(fā)現(xiàn)所有圖片的路徑都變成了 [object module]
object module
經(jīng)過一番努力的探索，終于在stackoverflow上找到了 相應(yīng)的問題
下方回答我翻譯下：
默認(rèn)情況下，file-loader生成使用ES模塊語法的JS模塊。在某些情況下，使用ES模塊是有益的，比如在模塊連接和樹抖動的情況下。
file-loader-options
簡而言之就是file-loader新版本默認(rèn)使用了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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript三種方法解決約瑟夫環(huán)問題的方法
約瑟夫環(huán)問題又稱約瑟夫問題或丟手絹問題，是一道經(jīng)典的算法問題，本篇將以循環(huán)鏈表、有序數(shù)組、數(shù)學(xué)遞歸三種方式來解決約瑟夫環(huán)問題。感興趣的可以了解一下2021-09-09
這篇文章主要介紹了JS的Form表單轉(zhuǎn)JSON格式的操作代碼，本文通過實例代碼給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細(xì)介紹了使用js和canvas實現(xiàn)時鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
BootStrap glyphicons 字體圖標(biāo)實現(xiàn)方法
字體圖標(biāo)是在 Web 項目中使用的圖標(biāo)字體。接下來通過本文給大家介紹BootStrap glyphicons 字體圖標(biāo)實現(xiàn)方法，需要的朋友參考下2016-05-05
基于Web?Components實現(xiàn)一個日歷原生組件
這篇文章主要為大家詳細(xì)介紹了如何利用Web?Components實現(xiàn)一個簡單的日歷原生組件，文中的示例代碼講解詳細(xì)，需要的小伙伴可以了解一下2023-07-07
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)動態(tài)時鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
微信小程序圖片輪播組件gallery slider使用方法詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序圖片輪播組件gallery slider的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介為大家詳細(xì)紹了JavaScript實現(xiàn)無限輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了對javaScript原型鏈的理解,以實例形式對javaScript原型鏈的概念及相關(guān)使用技巧做了較為淺顯易懂的分析,需要的朋友可以參考下2015-05-05
js實現(xiàn)鼠標(biāo)滑過文字鏈接色彩變化的效果
這篇文章主要介紹了js實現(xiàn)鼠標(biāo)滑過文字鏈接色彩變化的效果,涉及javascript鼠標(biāo)事件及樣式操作的技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05