webpack配置-打包後圖片路徑出錯

webpack配置-圖片路徑出錯

問題

項目在開發環境下工做正常，當打包後圖片不見了，檢查元素後發現路徑出錯了。
圖片路徑是這樣：background: url(/static/img/bg_camera_tip.bd37151.png)，但該路徑下文件並不存在。
打包後文件目錄以下：

能夠看到背景圖片的路徑應該是../../static而實際倒是/static，找到緣由後就好解決了

方法一

查看build目錄下webpack.base.conf.js的配置，圖片文件會通過url-loader處理。

module: {
    rules: [
      ...
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      ...
    ]
  }

它的做用是當文件大小小於limit限制時會返回一個base64串，其實就是把圖片資源編碼爲base64串放在CSS文件裏，這樣就能夠減小一次網絡請求，由於每一張圖片都是須要從服務端去下載的。可是若是文件太大了就會致使base64串很長，那放在CSS文件裏面就會致使文件很大，CSS的文件下載時間變長，就得不償失了，因此會有一個limit參數，在這個範圍內的纔會被轉成base64串，它的單位是字節。對於這個問題，該loader還提供了一個publicPath參數，目的是修改引用的圖片地址，默認是當前路徑，那直接改它就能夠了，即在options節點下添加一個參數publicPath: '../../'。

module: {
    rules: [
      ...
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          publicPath: '../../', //你實際項目的引用地址前綴
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      ...
    ]
  }

方法二

webpack.base.conf.js裏還有一條規則，每個vue文件都會通過vueLoaderConfig處理

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      ...
    ]
  }

vueLoaderConfig位於build/vue-loader.conf.js，它又調用了build/utils.js的cssLoaders的方法。

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

若是是生產環境options.extract值爲true，會調用這個ExtractTextPlugin插件作處理，它的做用是抽離項目中引用的樣式文件到一個獨立的CSS文件中，這樣就能夠一次加載全部的CSS文件，至關於CSS文件並行加載，能夠減小網絡請求次數，更多優勢及使用能夠查看ExtractTextWebpackPlugin。回到這個問題，它還有一個參數就是publicPath，能夠覆蓋所指定的loader的publicPath配置，那麼就跟前面的配置同樣，能夠給全部的loader統一配置引用文件的路徑地址。

另外這裏的user:loader其實是返回一系列的loader的集合，cssLoaders的返回是

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

這也就是即使你沒有在webpack.base.conf.js中配置sass-loader也能使用SASS語法的緣由。