# 基于 webp 的 H5 项目

// webp-loader.js
const { execFileSync } = require('child_process')
const webp = require('cwebp-bin')
const path = require('path')

// 开启子进程，执行webp
execFileSync(webp, [
  '-q', // 开启压缩
  '90', // 压缩率
  path.join(__dirname, 'assets/logo.png'), // 源文件路径
  path.join(__dirname, 'assets/logo.webp') // 生成文件的保存路径
])

const { execFileSync, exec } = require('child_process')
const webp = require('cwebp-bin')
const path = require('path')
const loaderUtils = require('loader-utils')

module.exports = function (content) {
  // loader的配置和内容生成一个文件名，该文件名即打包出来之后的图片文件名以及项目运行中使用的文件名
  const url = loaderUtils.interpolateName(this, this.query.name, {
    content: content,
    regExp: this.query.regExp
  })

  // 生成的文件存放路径
  // 放在项目根目录下的webp目录中
  const webpUrl = '/webp/' + url.substring(0, url.lastIndexOf('.')) + '.webp'

  // 判断webp目录存在不存在，不存在就创建webp目录
  if (!fs.existsSync(path.join(__dirname, 'webp'))) {
    fs.mkdirSync(path.join(__dirname, 'webp'))
  }

  // 执行图片转换操作
  execFileSync(webp, [
    '-q',
    this.query.quality || '75',
    this.resourcePath,
    '-o',
    path.join(__dirname, webpUrl)
  ])

  return content
}

module.exports.raw = true

// webp-loader.js
......
// 判断dist/img目录是否生成
fs.readdir(path.join(__dirname, 'dist/img'), (err, paths) => {
  if (err) return
  const toPath = path.join(__dirname, 'dist/img')
  const fromPath = path.join(__dirname, 'webp')
  // 执行shell脚本，将webp目录下所有的文件全部复制到dist/img下
  exec(`cp -rf ${fromPath}/* ${toPath}`, (err) => {
    if (err) {
      console.log(err)
    } else {
      // 复制完成之后删除webp目录，避免每次构建产生的文件重复，且webp目录不能被提交到git上，所以删除webp目录
      exec(`rm -rf ${fromPath}`)
    }
  })
})

module.exports = {
  chainwebpack(config) {
    config.module
      .rule('webp')
      .test(/\.(gif|png|jpe?g)$/i)
      .use()
      .loader('./utils/webp-loader.js')
      .options({
        include: /src/, // 只针对src目录下的图片做转换
        name: '[name].[hash:8].[ext]', // 文件名称的生成规则
        quality: 80 // 图片生成的压缩率
      })
  }
}

// 判断浏览器是否支持webp
const supportwebp = (function () {
  const canvas = typeof document === 'object' ? document.createElement('canvas') : {}
  canvas.width = canvas.height = 1
  return canvas.toDataURL ? canvas.toDataURL('image/webp').indexOf('image/webp') === 5 : false
})()
// 将是否支持webp的标识挂在到vue原型上，任何vue组件中通过this._iswebp_来获取
Vue.prototype._iswebp_ = supportwebp

// 直接通过img对象来加载webp图片的路径看是否能加载成功，如果成功，这表示对应的图片存在
let webpSrc
let img = new Image()
img.src = webpSrc
img.onload = () => {
  // 执行图片加载成功的操作
}

Vue.directive('webp', {
  bind(el, { context }) {
    // 判断浏览器是否支持webp格式图片，不支持直接什么都不做return掉
    if (!context._iswebp_) return
    const imgSrc = el.attributes.src.nodeValue
    const webpSrc = `${imgSrc.substr(0, imgSrc.lastIndexOf('.'))}.webp`
    let img = new Image()
    img.src = webpSrc
    // webp格式图片资源存在，加载成功之后替换element的原有src，
    // 不存在什么都不用做，直接加载源文件
    img.onload = function () {
      el.src = webpSrc
    }
  }
})