webpack打包后直接訪問頁面圖片路徑錯(cuò)誤的解決方法
前言
本文說的這種圖片路徑錯(cuò)誤是這樣的，運(yùn)行webpack-dev-server，一切正常，沒有錯(cuò)誤。當(dāng)webpack之后，直接打開index頁面，報(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/顯示正常。
緊接著，要打包，目的是脫離命令能直接訪問頁面。
操作如下：
1.執(zhí)行webpack
2.將build中的文件全部拷貝到src中
3.查看頁面
因?yàn)閳D片路徑錯(cuò)誤，所以找不到圖片。
我通過單獨(dú)給處理圖片的loader設(shè)置publicPath解決了這個(gè)問題，如下：
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',
options:{
publicPath:'/'
}
}
然后測試，webapck-dev-server成功，wepback成功，打開頁面訪問，成功。
路徑是這個(gè)樣子的。
總結(jié)
以上就是這文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
Nautil 中使用雙向數(shù)據(jù)綁定的實(shí)現(xiàn)
這篇文章主要介紹了Nautil 中使用雙向數(shù)據(jù)綁定的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
element必填校驗(yàn)輸入空格問題修改正則表達(dá)式、請(qǐng)求攔截器實(shí)現(xiàn)所有輸入框去除首尾空格(推薦)
這篇文章主要介紹了element必填校驗(yàn)輸入空格問題修改正則表達(dá)式、請(qǐng)求攔截器實(shí)現(xiàn)所有輸入框去除首尾空格,本文通過圖文實(shí)例代碼相結(jié)合給大家講解的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了Typescript3.9 常用新特性一覽，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)(1)
這篇文章主要為大家詳細(xì)介紹了bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
JavaScript實(shí)現(xiàn)form表單的多文件上傳
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)form表單的多文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了js動(dòng)態(tài)切換圖片的方法,包含完整的css文件與js文件實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(四)用地圖塊拼成大地圖
小時(shí)候我們玩過拼圖游戲，是用自己的手去拼的。今天我們來研究研究用javascript來拼圖感興趣的朋友可以了解下,希望本文對(duì)你有所幫助2013-01-01
相信大家都知道圖表是數(shù)據(jù)圖形化的表示，通過形象的圖表來展示數(shù)據(jù)，比如條形圖，折線圖，餅圖等?？梢暬瘓D表可以幫助開發(fā)者更容易理解復(fù)雜的數(shù)據(jù)，提高生產(chǎn)的效率和Web應(yīng)用和項(xiàng)目的可靠性?，F(xiàn)在就讓我們大家一起來學(xué)習(xí)用D3.js來實(shí)現(xiàn)餅圖的方法，有需要的可以參考借鑒。2016-09-09
JavaScript實(shí)現(xiàn)二分查找實(shí)例代碼
二分查找的前提為：數(shù)組、有序。這篇文章主要介紹了JavaScript實(shí)現(xiàn)二分查找實(shí)例代碼,需要的朋友可以參考下2017-02-02
reveal.js是一款開源的HTML演示框架,由Hakim El Hattab開發(fā),遵循MIT許可證,它支持嵌套幻燈片、Markdown、自動(dòng)動(dòng)畫、PDF導(dǎo)出等多種功能,本文就來介紹一下如何使用,感興趣的可以了解一下2024-09-09