安裝

項(xiàng)目根目錄下打開終端或命令行工具，運(yùn)行以下命令來安裝相關(guān)依賴包：

npm install image-minimizer-webpack-plugin imagemin imagemin-pngquant --save-dev

當(dāng)前版本 image-minimizer-webpack-plugin@3.8.3 imagemin@8.0.1 imagemin-pngquant@9.0.2
如果安裝后配置后編譯時(shí)報(bào)錯無法正常壓縮圖片，設(shè)置版本為當(dāng)前版本即可。

使用

在你的項(xiàng)目根目錄下，找到 vue.config.js 文件，根據(jù)以下內(nèi)容進(jìn)行修改：

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin') // 壓縮圖片插件

module.exports = {
  configureWebpack: {
    // 配置需要使用的 webpack 插件
    plugins: [
      // 壓縮圖片
      new ImageMinimizerPlugin({
        minimizer: {
          // 指定了采用哪種圖片壓縮實(shí)現(xiàn)方式
          implementation: ImageMinimizerPlugin.imageminGenerate,
          // 壓縮插件選項(xiàng)
          options: {
            plugins: ['pngquant']  // 用于對 PNG 圖片進(jìn)行壓縮
          }
        }
      })
    ]
  }
}

通過以上配置，當(dāng)項(xiàng)目構(gòu)建時(shí)，image-minimizer-webpack-plugin 插件會對項(xiàng)目中的圖片進(jìn)行壓縮，并使用指定的配置項(xiàng)來優(yōu)化不同格式的圖片。上述代碼中只用到了 pngquant 插件壓縮PNG格式的圖片。你可以根據(jù)需要調(diào)整插件選項(xiàng)。

配置完成后，Webpack 將在打包過程中將會自動進(jìn)行圖片壓縮。

更多壓縮插件選項(xiàng)請參考 mage-minimizer-webpack-plugin GitHub 倉庫

vue.config.js 修改完成后的文件內(nèi)容如下：

const path = require('path')
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin') // 壓縮圖片插件

module.exports = {
  // 靜態(tài)資源訪問路徑, 默認(rèn)是 '/'
  publicPath: './',
  // 指定構(gòu)建后的輸出目錄，默認(rèn)是 'dist'
  outputDir: 'dist',
  // 是否每次保存時(shí) lint 代碼,可選值 (boolean | 'warning' | 'default' | 'error') 默認(rèn) 'default'
  lintOnSave: 'default',
  // 配置開發(fā)服務(wù)器選項(xiàng)
  devServer: {
    // 開發(fā)服務(wù)器啟動時(shí)是否自動打開瀏覽器
    open: false,
    // 端口號
    port: 3000
  },
  // 配置css相關(guān)選項(xiàng)
  css: {
    // 開啟 source map
    sourceMap: process.env.NODE_ENV == 'development'
  },
  // webpack 的配置對象
  configureWebpack: {
    // 配置需要使用的 webpack 插件
    plugins: [
      // 壓縮圖片
      new ImageMinimizerPlugin({
        minimizer: {
          // 指定了采用哪種圖片壓縮實(shí)現(xiàn)方式
          implementation: ImageMinimizerPlugin.imageminGenerate,
          // 壓縮插件選項(xiàng)
          options: {
            plugins: ['pngquant'] // 用于對 PNG 圖片進(jìn)行壓縮
          }
        }
      })
    ],
    // 配置Webpack模塊解析的方式，使得你可以通過模塊名字而不是相對路徑來引入模塊
    resolve: {
      // 設(shè)置路徑別名
      alias: {
        '@': path.resolve('src'),
        '@public': path.resolve('public'),
        '@img': path.resolve('src/assets/images'),
        '@js': path.resolve('src/assets/scripts'),
        '@css': path.resolve('src/assets/styles')
      }
    }
  }
}

框架搭建整體流程

• 第一步 Vue2 使用 Vue 腳手架 Vue CLI 搭建一個(gè) Vue.js 前端項(xiàng)目框架

• 第二步 Vue2 vue.config.js 基礎(chǔ)配置，路徑別名alias

• 第三步 Vue2 vue.config.js 集成 Less 配置 sourceMap+全局變量

• 第四步 Vue2 配置ESLint

• 第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置圖片壓縮

• 第六步 Vue2 集成全家桶 vue-router vuex axios 和 element-ui

• 第七步 Webpack 配置多環(huán)境和全局變量 cross-env 和 webpack.DefinePlugin

點(diǎn)擊下載步驟 1-7 配置完成的完整 Demo