使用webpack打包后，圖片沒有加載出來，頁面空白，報錯圖片引用的路徑不對

解決辦法：

1.找到config->index.js

將 assetsPublicPath: '/', 改為 assetsPublicPath: './' 

build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',       // 改為 assetsPublicPath: './'
    ……
}

2.build->utils.js

找到下面這個函數的代碼。

在if (options.extract) {     
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'    
      })
    } 

代碼里添加 publicPath:'../../' 

 function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {     
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'     // 添加 publicPath:'../../' 
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

有的問題使用第一種辦法就可以解決，我有些圖片放在全局，全局的圖片沒有打包出來，添加了第二種解決辦法，圖片解決了。

補充：

webpack 打包圖片文件

一、準備工作

       1. 在src文件夾中新建一個img文件夾，并且在里面放兩張圖片；  

        2.在css文件中引用圖片，從而讓webpack能夠知道這個圖片也是要打包的；         

二、  使用url-loader和file-loader

        能打包圖片的loader有url-loader、file-loader;二者的區(qū)別在于當圖片的大小>url-loader中的limit時，那么webpack會選擇使用file-loader來打包。關于如何在webpack中文官網找到loader并且如何使用請看我的其他文章。

        1. 接下來看一下詳細的url-loader配置:       

        重點放在options中的limit和name, limit的作用就是當要打包的圖片大小>limit設置的值時，會使用file-loader進行打包。name的作用是對打包生成的圖片文件進行命名規(guī)約；我來詳細解釋一下： img/的作用是在dist目錄下會新建一個img文件夾用于存放圖片；[name]是使用圖片原本的名稱;[hash:8]是通過哈希函數將圖片的名字進行計算，然后取前8位;[ext]就是圖片文件本身的后綴名。[name].[hash:8].[ext]就是用來生成文件名的，所以打包后圖片最終的效果就是這樣了：       

       注意點1：那就是這個name它是使用file-loader打包才會有的效果哦，如果是url-loader進行打包，那么打包好的圖片不會按照name的規(guī)則來生成，這個要注意一下。

      注意點2： 因為打包好的圖片輸出位置是在dist文件夾中，所以還需要一個配置：publicPath='dist/'      

      老實說我還沒有辦法說清楚它，但是加上去才能成功打包，所以先加上，等我后面知曉了它的作用我會補上它的作用的。

到此這篇關于webpack 打包后圖片加載報錯的解決辦法的文章就介紹到這了,更多相關webpack 打包出錯內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！