/*
 * @Description:
 * @Date: 2021-04-29 14:51:17
 * @LastEditTime: 2021-06-15 18:53:36
 * @FilePath: \web-template\vue.config.js
 * @Author: Devin
 */

const CompressionPlugin = require("compression-webpack-plugin")
// const name = defaultSettings.title || 'vue Admin Template' // page title
const port = process.env.port || process.env.npm_config_port || 9590 // dev port
// let timeStamp = new Date().getTime(); // 获取当前的时间戳

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'

module.exports = {
  // filenameHashing: false, // 打包的时候不使用hash值.因为我们有时间戳来确定项目的唯一性了/
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "@/styles/variables.scss";`
      }
    },
    // extract: { // 打包后css文件名称添加时间戳
    //     filename: `css/[name].${ timeStamp }.css`,
    //     chunkFilename: `css/[name].${ timeStamp }.css`,
    // }
  },
  devServer: {
    hot: true,
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: false
    },
    disableHostCheck: true
  },

  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test
    // set svg-sprite-loader

    // config.entry('main').add('babel-polyfill')
    // // 开启图片压缩
    // config.module.rule('images')
    //   .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
    //   .use('image-webpack-loader')
    //   .loader('image-webpack-loader')
    //   .options({ bypassOnDebug: true })

    if (isProduction) {
      config.plugin('compressionPlugin')
        .use(new CompressionPlugin({
          test: /\.js$|\.html$|.\css/, // 匹配文件名
          threshold: 10240, // 对超过10M的数据压缩
          deleteOriginalAssets: false // 不删除源文件
        }))

      // 去掉元素之间的空格
      config.module
        .rule('vue')
        .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          options.compilerOptions.preserveWhitespace = true
          return options
        })
        .end()
    }

  }
}