vue-cli3打包时图片压缩处理

当我们在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。
在其编译过程中，所有诸如 、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。
在其内部，vue 通过 file-loader 用版本哈希值和正确的公共基础路径来决定最终的图片路径，再用 url-loader 将小于 4kb 的图片内联，以减少 HTTP 请求的数量。
我们可以通过 chainWebpack 调整图片的大小限制。
例如，我们将图片大小限制设置为 6kb，低于6kb的图片全部被内联，高于6kb的图片会放在单独的img文件夹中。

代码如下：

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    const imagesRule = config.module.rule("images")
    imagesRule
      .use('url-loader')
        .loader('url-loader')
        .tap(options => Object.assign(options, { limit: 6144 }))
  }
}