技術標籤：webpackvue.js

webpack打包時，會根據webpack.config.js 中url-loader中設定的limit大小來對圖片進行處理，小於limit的圖片轉化成base64格式，其餘的不做操作。對於比較大的圖片我們可以用image-webpack-loader 來壓縮圖片。
具體方法：

npm install image-webpack-loader --save-dev

在 webpack.config.js 中配置：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 'url-loader'
 
,
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    {
      loader: 'image-webpack-loader',// 壓縮圖片
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}

這樣超出1M的圖片就會交給image-webpack-loader去處理 打包時就會發現vendor.js檔案大小減少了很多
另外
執行 cnpm run build 開始打包後會在專案目錄下自動建立dist目錄，打包好的檔案都在其中

productionSourceMap:false 

把這個改為false。不然在最終打包的檔案中會出現一些map檔案

map檔案的作用：專案打包後，程式碼都是經過壓縮加密的，如果執行時報錯，輸出的錯誤資訊無法準確得知是哪裡的程式碼報錯。
有了map就可以像未加密的程式碼一樣，準確的輸出是哪一行哪一列有錯。

去掉之後就會發現少了map檔案打包的大小就會少很多