webpack打包后直接訪問(wèn)頁(yè)面圖片路徑錯(cuò)誤的解決方法
前言
本文說(shuō)的這種圖片路徑錯(cuò)誤是這樣的，運(yùn)行webpack-dev-server，一切正常，沒(méi)有錯(cuò)誤。當(dāng)webpack之后，直接打開index頁(yè)面，報(bào)錯(cuò)，圖片找不到，找不到的原因是路徑錯(cuò)誤。
先看我的項(xiàng)目代碼
webpack.config.js
var Webpack = require("webpack");
var path = require("path");
module.exports = {
entry: './js/entry.js',
output: {
path: path.join(__dirname, '/build'),
filename: 'bundle.js',
publicPath: "/src/"
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
},
{
test: require.resolve('zepto'),
loader: 'exports-loader?window.Zepto!script-loader'
}
]
},
watch: true,
devtool: "cheap-module-eval-source-map"
}
這里設(shè)置了publicPath,用法點(diǎn)擊這里
index.html中引用路徑如下：
<script type="text/javascript" src="src/bundle.js" ></script>
當(dāng)運(yùn)行webapck-dev-server時(shí)，http://localhost:8080/顯示正常。
緊接著，要打包，目的是脫離命令能直接訪問(wèn)頁(yè)面。
操作如下：
1.執(zhí)行webpack
2.將build中的文件全部拷貝到src中
3.查看頁(yè)面
因?yàn)閳D片路徑錯(cuò)誤，所以找不到圖片。
我通過(guò)單獨(dú)給處理圖片的loader設(shè)置publicPath解決了這個(gè)問(wèn)題，如下：
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',
options:{
publicPath:'/'
}
}
然后測(cè)試，webapck-dev-server成功，wepback成功，打開頁(yè)面訪問(wèn)，成功。
路徑是這個(gè)樣子的。
總結(jié)
以上就是這文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(自寫原生js)
常用的頁(yè)面效果有彈出層效果，無(wú)縫滾動(dòng)效果，選項(xiàng)卡切換效果，接下來(lái)與大家分享一款自己用原生javascript寫的選項(xiàng)卡切換效果，感興趣的朋友可以參考下哈2013-03-03
js+html5實(shí)現(xiàn)側(cè)滑頁(yè)面效果
這篇文章主要為大家詳細(xì)介紹了js+html5實(shí)現(xiàn)側(cè)滑頁(yè)面效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
HTML+CSS+JS實(shí)現(xiàn)抓娃娃機(jī)游戲
這篇文章主要介紹了如何利用HTML+CSS+JS制作抓娃娃機(jī)游戲，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
JS表示Stack類練習(xí)用棧實(shí)現(xiàn)任意進(jìn)制轉(zhuǎn)換
這篇文章主要為大家介紹了JS表示Stack類練習(xí)用棧實(shí)現(xiàn)任意進(jìn)制轉(zhuǎn)換示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
js判斷生效時(shí)間不得大于失效時(shí)間的思路及代碼
生效時(shí)間不得大于失效時(shí)間在一些推銷、優(yōu)惠方面還是比較實(shí)用的，接下來(lái)一起看下詳細(xì)的實(shí)現(xiàn)代碼，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-04-04
如何高效率去掉js數(shù)組中的重復(fù)項(xiàng)
如何高效率去掉js數(shù)組中的重復(fù)項(xiàng)呢？下面小編就為大家?guī)?lái)一篇高效率去掉js數(shù)組中重復(fù)項(xiàng)的實(shí)現(xiàn)方法。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2016-04-04
微信小程序?qū)W習(xí)(4)-系統(tǒng)配置app.json詳解
我們使用app.json文件來(lái)對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。2017-01-01
用roll.js實(shí)現(xiàn)的圖片自動(dòng)滾動(dòng)+鼠標(biāo)觸動(dòng)的特效
用roll.js實(shí)現(xiàn)的圖片自動(dòng)滾動(dòng)+鼠標(biāo)觸動(dòng)的特效...2007-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)文件預(yù)覽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
使用Bootstrap框架制作查詢頁(yè)面的界面實(shí)例代碼
這篇文章主要介紹了使用Bootstrap框架制作查詢頁(yè)面界面的效果，本文以職業(yè)技能考證分?jǐn)?shù)查詢界面為例，通過(guò)實(shí)例代碼給大家詳細(xì)介紹,需要的朋友可以參考下2016-05-05