const { defineConfig } = require('@vue/cli-service')
const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

let cdn = {
  css: [
    'https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'
  ],
  js: [
    'https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js',
    'https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js',
    // 'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
    'https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js',
    'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'
  ]
}

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './',
  productionSourceMap: false,
  devServer: {

    hot: false,
    compress: true,
    open: false,
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },
    // proxy: {
    //   '/api': {
    //     target: 'http://115.159.153.142:9010/h5',
    //     changeOrigin: true,
    //     ws: true,
    //     pathRewrite: {
    //       '^/api': ''
    //     }
    //   }
    // }
  },
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 生产环境下注入一个变量cdn 变量可以在html中通过htmlWebpackPlugin.options进行获取
      config.plugin('html')
          .tap(args => {
            args[0].cdn = cdn;
            return args;
          })
    }

    // 移除 prefetch 插件
    config.plugins.delete('prefetch')
    config.plugins.delete('preload')


    // 配置别名
    config.resolve.alias
        //第一个参数：别名 第二个参数：路径
        .set('@',resolve('src'))
        .set('@less',resolve('src/assets/less'))
        .set('@page',resolve('src/assets/less/page'))


    // 配置 less 的自动导入
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))


  },
  configureWebpack: config => {
    // 正式阶段，项目打包上线的优化措施
    if (process.env.NODE_ENV === 'production') {

      /**
       * 去除这些公共包，让webpack不打包到项目源码的js中，减小项目js体积
       * 然后使用 pages 节点下的 cdn 数组里面的资源外链来引入。
       */
      config.externals = {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        Vant: 'Vant'
      };


      /**
       * 部署阶段 代码压缩
       */
      config.plugins.push(
          // 生产环境自动删除console
          new UglifyJsPlugin({
            uglifyOptions: {
              warnings: false,
              compress: {
                drop_debugger: true,
                drop_console: true
              }
            },
            sourceMap: false,
            parallel: true
          })
      );


      /**
       * Gzip压缩
       */
      return {
        plugins: [new CompressionPlugin({
          test: /\.js$|\.html$|\.css/, //匹配文件名
          threshold: 10240, //对超过10k的数据进行压缩
          deleteOriginalAssets: false //是否删除原文件
        })]
      }


    }
  }
})


function resolve(dir) {
  return path.join(__dirname,dir)
}


function addStyleResource (rule) {
  rule.use('style-resource')
      .loader('style-resources-loader')
      .options({
        patterns: [
          path.resolve(__dirname, './src/assets/less/_.less'),
        ],
      })
}