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/'
}
}
]
},
...
]
}
...
這個配置也是和目前網(wǎng)上教程差不多的。使用 url-loader 編譯圖片文件，輸出到imgs文件夾下，乍一看也沒什么問題，我相信你也是這么認為的。
但是webpack構建之后，會發(fā)現(xiàn)，頁面上引用的圖片都無法正常顯示：
圖片引用錯誤
打開控制臺，會發(fā)現(xiàn)所有圖片的路徑都變成了 [object module]
object module
經(jīng)過一番努力的探索，終于在stackoverflow上找到了 相應的問題
下方回答我翻譯下：
默認情況下，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配置項里，設置esModule為false
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
esModule: false
}
}
]
}
兩種方法對比起來，顯而易見，相信你已經(jīng)知道了哪個方法更好用。于是我修改了webpack配置后，再編譯，就沒問題啦:wink:。
build-success
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了button選擇顏色簡單實例，有需要的朋友可以參考一下2013-11-11
Package.js 現(xiàn)代化的JavaScript項目make工具
Package.js是一個很方便的JavaScript包依賴管理及Make工具。它的設計目標是使瀏覽器端的JavaScript Component/App 開發(fā)更加模塊化2012-05-05
javascript Array.sort() 跨瀏覽器下需要考慮的問題
最近組里項目需要一個簡單的Table排序的功能，這個功能實現(xiàn)起來很簡單，并且網(wǎng)上也有很多現(xiàn)成的代碼，因此任務很快完成。2009-12-12
讓JavaScript中setTimeout支持鏈式操作的方法
這篇文章主要介紹了讓JavaScript中setTimeout支持鏈式操作的方法,本文直接給出代碼實例,需要的朋友可以參考下2015-06-06
js解析xml字符串和xml文檔實現(xiàn)原理及代碼(針對ie與火狐)
分別針對ie和火狐分別作了對xml文檔和xml字符串的解析,考慮到了瀏覽器的兼容性,至于在ajax環(huán)境下解析xml，其實原理是一樣的，只不過放在了ajax里，還是要對返回的xml進行解析,感興趣的朋友可以了解下，或許對你學習js解析xml有所幫助2013-02-02
javascript中的繼承使用實例代碼，需要的朋友可以參考下。2011-04-04
往輸入域中插入字符串(光標所在位置)，在本文將為大家介紹下使用js是如何實現(xiàn)的，感興趣的朋友可以參考下2013-09-09
這篇文章主要為大家詳細介紹了JS實現(xiàn)長圖上下滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
Javascript aop(面向切面編程)之a(chǎn)round(環(huán)繞)分析
這篇文章主要介紹了Javascript aop(面向切面編程)之a(chǎn)round(環(huán)繞) ,需要的朋友可以參考下2015-05-05
async 函數(shù)就是隧道盡頭的亮光，很多人認為它是異步操作的終極解決方案。接下來通過本文給大家分享js 中async 函數(shù)的含義和用法，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05