const { defineConfig } = require('@vue/cli-service')
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
const path = require('path')
// 拼接路径
function resolve(dir) {
  return path.join(__dirname, dir)
}
const isProduction = process.env.NODE_ENV === 'production';
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录
  lintOnSave: false, // eslint-loader 是否在保存的时候检查
  assetsDir: 'static', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  pages: undefined, // 以多页模式构建应用程序。
  runtimeCompiler: false, // 是否使用包含运行时编译器的 Vue 构建版本
  // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建，在适当的时候开启几个子进程去并发的执行压缩
  parallel: require('os').cpus().length > 1,
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件，一般情况不建议打开
  chainWebpack: (config) => {
    // 配置别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('views', resolve('src/views'))
    /**
      * 删除懒加载模块的 prefetch preload，降低带宽压力
      * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
      * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
      * 而且预渲染时生成的 prefetch 标签是 modern 版本的，低版本浏览器是不需要的
      */
    config.plugins
      .delete('prefetch')
      .delete('preload')
    // 解决 cli3 热更新失效 https://github.com/vuejs/vue-cli/issues/1559
    config.resolve
      .symlinks(true)
    // if (isProduction) {
    //   /**
    //   * 生产环境用远程cdn包缩小项目体积，优化首页加载速度
    //   */
    //   config.externals({
    //     'vue': 'Vue',
    //     'vuex': 'Vuex',
    //     'vue-router': 'VueRouter',
    //     'axios': 'axios'
    //   })
    // }
  },
  configureWebpack: (config) => {
    if (isProduction) {
      config.plugins.push(
        new CompressionWebpackPlugin({
          algorithm: 'gzip',
          test: /\.ts$|\.html$|\.json$|\.css/,
          threshold: 10240,
          minRatio: 0.8,
        })
      )
      config.plugins.push(
        new ParallelUglifyPlugin({
          uglifyJS: {
            output: {
              comments: false,//是否保留代码中的注释，默认为保留
            },
            warnings: false,//是否在UglifyJS删除没有用到的代码时输出警告信息，默认为false
            compress: {
              drop_console: true,//是否删除代码中所有的console语句，默认为false
              collapse_vars: true,//是否内嵌虽然已经定义了，但是只用到一次的变量， 默认值false
              reduce_vars: true,//是否提取出现了多次但是没有定义成变量去引用的静态值，默认为false
            }
          },
          cacheDir: '',//用作缓存的可选绝对路径。如果未提供，则不使用缓存。
          sourceMap: false,//可选布尔值。是否为压缩后的代码生成对应的Source Map(浏览器可以在调试代码时定位到源码位置了),这会减慢编译速度。默认为false
        })
      )
      // 开启分离js
      config.optimization = {
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 1000 * 60,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                // 排除node_modules 然后吧 @ 替换为空 ,考虑到服务器的兼容
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                return `npm.${packageName.replace('@', '')}`
              }
            }
          }
        }
      };

      // 取消webpack警告的性能提示
      config.performance = {
        hints: 'warning',
        //入口起点的最大体积
        maxEntrypointSize: 1000 * 500,
        //生成文件的最大体积
        maxAssetSize: 1000 * 1000,
        //只给出 js 文件的性能提示
        assetFilter: function (assetFilename) {
          return assetFilename.endsWith('.js');
        }
      };
      //优化项配置
      config.optimization = {
        splitChunks: { // 分割代码块
          cacheGroups: {
            vendor: {//第三方库抽离
              chunks: 'all',
              test: /node_modules/,
              name: 'vendor',
              minChunks: 1,//在分割之前，这个代码块最小应该被引用的次数
              maxInitialRequests: 5,
              minSize: 0,//大于0个字节
              priority: 100//权重
            },
            common: {  //公用模块抽离
              chunks: 'all',
              test: /[\\/]src[\\/]js[\\/]/,
              name: 'common',
              minChunks: 2, //在分割之前，这个代码块最小应该被引用的次数
              maxInitialRequests: 5,
              minSize: 0,//大于0个字节
              priority: 60
            },
            styles: { //样式抽离
              name: 'styles',
              test: /\.(sa|sc|c)ss$/,
              chunks: 'all',
              enforce: true
            },
            runtimeChunk: {
              name: 'manifest'
            }
          }
        }
      }
    }
  },
  pwa: {}, // PWA 插件相关配置
  devServer: {
    // host: 'localhost',
    // host: '192.168.137.1',
    port: 8000, // 端口号
    https: false, // https:{type:Boolean}
    open: false, //配置自动启动浏览器  http://172.11.11.22:8888/rest/XX/
    hot: true, // 热更新
    // proxy: 'http://localhost:8000'   // 配置跨域处理,只有一个代理
    proxy: {
      //配置自动启动浏览器
      // '/api': {
      //   target: 'http://47.111.184.60:30085',
      //   changeOrigin: true,
      //   // ws: true,//websocket支持
      //   secure: false,
      //   // ws: true,
      //   // pathRewrite: {
      //   //     '^/api': ''
      //   // }

      // },
      // '/api1': {
      //   target: 'http://172.16.68.134:8089',
      //   changeOrigin: true,
      //   //ws: true,//websocket支持
      //   secure: false,
      // },
    },
  },
  // 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
  pluginOptions: {},
})