首頁  >  文章  >  web前端  >  如何解決webpack打包後直接存取頁面圖片路徑錯誤

如何解決webpack打包後直接存取頁面圖片路徑錯誤

不言
不言原創
2018-06-28 11:53:211449瀏覽

這篇文章主要為大家介紹了在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: &#39;url-loader?limit=8192&name=images/[hash:8].[name].[ext]&#39;,
  options:{
   publicPath:&#39;/&#39;
  }
  }

然後測試,webapck- dev-server成功,wepback成功,打開頁面訪問,成功。

路徑是這個樣子的。

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

關於webpack專案混用css module的方法

CSS3中的Transition過度與Animation動畫屬性的使用介紹

#

以上是如何解決webpack打包後直接存取頁面圖片路徑錯誤的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn