這篇文章主要為大家介紹了在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.執行webpack
2.將build中的檔案全部拷貝到src中
# 33 .查看頁面
因為圖片路徑錯誤，所以找不到圖片。
我透過單獨為處理圖片的loader設定publicPath解決了這個問題，如下：
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',
options:{
publicPath:'/'
}
}然後測試，webapck- dev-server成功，wepback成功，打開頁面訪問，成功。
路徑是這個樣子的。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
CSS3中的Transition過度與Animation動畫屬性的使用介紹
#
以上是如何解決webpack打包後直接存取頁面圖片路徑錯誤的詳細內容。更多資訊請關注PHP中文網其他相關文章！
