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