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

更新時(shí)間：2018年04月26日 13:53:29 作者：我來自伯納烏

本篇文章主要介紹了webpack配置打包后圖片路徑出錯(cuò)的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

問題

項(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串很長，那放在CSS文件里面就會(huì)導(dǎo)致文件很大，CSS的文件下載時(shí)間變長，就得不償失了，所以會(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語法的原因。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: