<strike id="oscsq"></strike>

<ul id="oscsq"></ul>

<fieldset id="oscsq"><menu id="oscsq"></menu></fieldset><del id="oscsq"></del>

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

zorpan 發布于2019-08-22 16:43 / 2876人閱讀

摘要：配置圖片路徑出錯問題項目在開發環境下工作正常，當打包后圖片不見了，檢查元素后發現路徑出錯了。打包后文件目錄如下可以看到背景圖片的路徑應該是而實際卻是，找到原因后就好解決了方法一查看目錄下的配置，圖片文件會經過處理。

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語法的原因。

云服務器 GPU云服務器 Webpack打包分塊綁定域名后訪問出錯 webpack cdn配置為什么 android打包后

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94605.html

webpak最全的簡單入門

摘要：了解什么是官方文檔是這樣介紹的點我了解官方文檔簡單的來說，可以看做是模塊打包機它做的事情是，分析你的項目結構，找到模塊以及其它的一些瀏覽器不能直接運行的拓展語言，等，并將其轉換和打包為合適的格式供瀏覽器使用。了解webpack 什么是webpack 官方文檔是這樣介紹的：點我了解官方文檔簡單的來說，WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaSc...

FreeZinG 2019-08-26 10:46 評論0 收藏0
webpack多頁應用架構系列（十二）：利用webpack生成HTML普通網頁&頁面模板

摘要：徹底分離源文件目錄和生成文件目錄使用生成出來的頁面可以很安心地跟打包好的其它資源放到一起，相對于另起一個目錄專門存放頁面文件來說，整個文件目錄結構更加合理如何利用生成頁面生成頁面主要是通過來實現的，下面來介紹如何實現。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/119000000712...

BaronZhang 2019-08-20 11:34 評論0 收藏0
從基礎到實戰手摸手帶你掌握新版Webpack4.0詳解一起讀文檔

摘要：構建構建就是把源代碼轉換成發布到線上的可執行代碼，包括如下內容。自動刷新監聽本地源代碼的變化，自動重新構建刷新瀏覽器。自動發布更新完代碼后，自動構建出線上發布代碼并傳輸給發布系統。將文件放入到項目中，在中新建一個放字體圖標的文件夾。項目地址 github.com/wudiufo/Web… 知識點概覽： Loader，HMR ,Create React App, Caching, Plug...

王軍 2019-05-23 17:31 評論0 收藏0
webpack4初學習

webpack基于node，因此想要學習webpack首先要安裝node。webpack4要安裝node8.2以上版本。 1、安裝webpack 為什么選擇本地安裝，主要是由于以后介紹熱更新這一部分不會報錯，如果全局安裝熱更新就會報錯，以本部分為基礎依次介紹，保證各部分不會出錯。 mkdir webpack-test cd webpack-test npm init //初始化npm，都選擇默認，...

Object 2019-08-23 14:51 評論0 收藏0
webpack學習筆記

摘要：配置完成后就可以使用來打包代碼了。值得注意的是會刪除所有無作用代碼也就是說那些包裹在這些全局變量下的代碼塊都會被刪除這樣就能保證這些代碼不會因發布上線而泄露。默認會從項目的根目錄下引入這些文件。命令使用 npm install webpack -g 作為全局安裝, 在任意目錄使用 npm install webpack --save-dev 作為項目依賴安裝 np...

mylxsw 2019-08-21 10:36 評論0 收藏0