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