第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置图片压缩

安装

项目根目录下打开终端或命令行工具，运行以下命令来安装相关依赖包：

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

当前版本 [email protected] [email protected] [email protected]
如果安装后配置后编译时报错无法正常压缩图片，设置版本为当前版本即可。

使用

在你的项目根目录下，找到 vue.config.js 文件，根据以下内容进行修改：

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin') // 压缩图片插件

module.exports = {
  configureWebpack: {
    // 配置需要使用的 webpack 插件
    plugins: [
      // 压缩图片
      new ImageMinimizerPlugin({
        minimizer: {
          // 指定了采用哪种图片压缩实现方式
          implementation: ImageMinimizerPlugin.imageminGenerate,
          // 压缩插件选项
          options: {
            plugins: ['pngquant']  // 用于对 PNG 图片进行压缩
          }
        }
      })
    ]
  }
}

通过以上配置，当项目构建时，image-minimizer-webpack-plugin 插件会对项目中的图片进行压缩，并使用指定的配置项来优化不同格式的图片。上述代码中只用到了 pngquant 插件压缩PNG格式的图片。你可以根据需要调整插件选项。

配置完成后，Webpack 将在打包过程中将会自动进行图片压缩。

更多压缩插件选项请参考 mage-minimizer-webpack-plugin GitHub 仓库

vue.config.js 修改完成后的文件内容如下：

const path = require('path')
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin') // 压缩图片插件

module.exports = {
  // 静态资源访问路径, 默认是 '/'
  publicPath: './',
  // 指定构建后的输出目录，默认是 'dist'
  outputDir: 'dist',
  // 是否每次保存时 lint 代码,可选值 (boolean | 'warning' | 'default' | 'error') 默认 'default'
  lintOnSave: 'default',
  // 配置开发服务器选项
  devServer: {
    // 开发服务器启动时是否自动打开浏览器
    open: false,
    // 端口号
    port: 3000
  },
  // 配置css相关选项
  css: {
    // 开启 source map
    sourceMap: process.env.NODE_ENV == 'development'
  },
  // webpack 的配置对象
  configureWebpack: {
    // 配置需要使用的 webpack 插件
    plugins: [
      // 压缩图片
      new ImageMinimizerPlugin({
        minimizer: {
          // 指定了采用哪种图片压缩实现方式
          implementation: ImageMinimizerPlugin.imageminGenerate,
          // 压缩插件选项
          options: {
            plugins: ['pngquant'] // 用于对 PNG 图片进行压缩
          }
        }
      })
    ],
    // 配置Webpack模块解析的方式，使得你可以通过模块名字而不是相对路径来引入模块
    resolve: {
      // 设置路径别名
      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 搭建一个 Vue.js 前端项目框架
• 第二步 Vue2 vue.config.js 基础配置，路径别名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 配置多环境和全局变量 cross-env 和 webpack.DefinePlugin

点击下载步骤 1-7 配置完成的完整 Demo