webpack打包后直接訪問(wèn)頁(yè)面圖片路徑錯(cuò)誤的解決方法

這篇文章主要為大家展示了“webpack打包后直接訪問(wèn)頁(yè)面圖片路徑錯(cuò)誤的解決方法”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“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è)樣子的。

以上是“webpack打包后直接訪問(wèn)頁(yè)面圖片路徑錯(cuò)誤的解決方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！