webpack配置-打包后圖片路徑出錯(cuò)

zorpan 發(fā)布于2019-08-22 16:43 / 2883人閱讀

摘要：配置圖片路徑出錯(cuò)問題項(xiàng)目在開發(fā)環(huán)境下工作正常，當(dāng)打包后圖片不見了，檢查元素后發(fā)現(xiàn)路徑出錯(cuò)了。打包后文件目錄如下可以看到背景圖片的路徑應(yīng)該是而實(shí)際卻是，找到原因后就好解決了方法一查看目錄下的配置，圖片文件會(huì)經(jīng)過處理。

webpack配置-圖片路徑出錯(cuò) 問題

項(xiàng)目在開發(fā)環(huán)境下工作正常，當(dāng)打包后圖片不見了，檢查元素后發(fā)現(xiàn)路徑出錯(cuò)了。
圖片路徑是這樣：background: url(/static/img/bg_camera_tip.bd37151.png)，但該路徑下文件并不存在。
打包后文件目錄如下：

可以看到背景圖片的路徑應(yīng)該是../../static而實(shí)際卻是/static，找到原因后就好解決了

方法一

查看build目錄下webpack.base.conf.js的配置，圖片文件會(huì)經(jīng)過url-loader處理。

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

它的作用是當(dāng)文件大小小于limit限制時(shí)會(huì)返回一個(gè)base64串，其實(shí)就是把圖片資源編碼為base64串放在CSS文件里，這樣就可以減少一次網(wǎng)絡(luò)請(qǐng)求，因?yàn)槊恳粡垐D片都是需要從服務(wù)端去下載的。但是如果文件太大了就會(huì)導(dǎo)致base64串很長(zhǎng)，那放在CSS文件里面就會(huì)導(dǎo)致文件很大，CSS的文件下載時(shí)間變長(zhǎng)，就得不償失了，所以會(huì)有一個(gè)limit參數(shù)，在這個(gè)范圍內(nèi)的才會(huì)被轉(zhuǎn)成base64串，它的單位是字節(jié)。對(duì)于這個(gè)問題，該loader還提供了一個(gè)publicPath參數(shù)，目的是修改引用的圖片地址，默認(rèn)是當(dāng)前路徑，那直接改它就可以了，即在options節(jié)點(diǎn)下添加一個(gè)參數(shù)publicPath: "../../"。

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

方法二

webpack.base.conf.js里還有一條規(guī)則，每一個(gè)vue文件都會(huì)經(jīng)過vueLoaderConfig處理

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

vueLoaderConfig位于build/vue-loader.conf.js，它又調(diào)用了build/utils.js的cssLoaders的方法。

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

如果是生產(chǎn)環(huán)境options.extract值為true，會(huì)調(diào)用這個(gè)ExtractTextPlugin插件做處理，它的作用是抽離項(xiàng)目中引用的樣式文件到一個(gè)獨(dú)立的CSS文件中，這樣就可以一次加載所有的CSS文件，相當(dāng)于CSS文件并行加載，可以減少網(wǎng)絡(luò)請(qǐng)求次數(shù)，更多優(yōu)點(diǎn)及使用可以查看ExtractTextWebpackPlugin。回到這個(gè)問題，它還有一個(gè)參數(shù)就是publicPath，可以覆蓋所指定的loader的publicPath配置，那么就跟前面的配置一樣，可以給所有的loader統(tǒng)一配置引用文件的路徑地址。

另外這里的user:loader實(shí)際上是返回一系列的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語(yǔ)法的原因。