const path = require("path");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;
const resolve = dir => path.join(__dirname, dir);
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);

const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const Timestamp = new Date().getTime();

module.exports = {
  publicPath: IS_PROD ? process.env.VUE_APP_PUBLIC_PATH : "/", // 默认'/'，部署应用包时的基本 URL
  lintOnSave: false,
  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  productionSourceMap: !IS_PROD, // 生产环境的 source map
  parallel: require("os").cpus().length > 1,
  pwa: {},
  configureWebpack: config => {
    const plugins = [];
    if (IS_PROD) {
      plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8
        }),
        new MiniCssExtractPlugin({
          // 修改打包后css文件名
          filename: `css/[name].${Timestamp}.css`,
          chunkFilename: `css/[name].${Timestamp}.css`
        })
      );
    }
    config.output.filename = `[name].${Timestamp}.js`;
    config.output.chunkFilename = `[name].${Timestamp}.js`;


    config.externals = {
      vue: "Vue",
      "vue-router": "VueRouter",
      vuex: "Vuex",
      axios: "axios"
    };
    config.plugins = [...config.plugins, ...plugins];
  },
  chainWebpack: config => {
    // 修复HMR
    config.resolve.symlinks(true);
    // 打包分析
    if (IS_PROD) {
      config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
        {
          analyzerMode: "static"
        }
      ]);
    }
    // 添加别名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@assets", resolve("src/assets"))
      .set("@components", resolve("src/components"))
      .set("@views", resolve("src/views"))
      .set("@router", resolve("src/router"))
      .set("@store", resolve("src/store"))

    const cdn = {
      dev: {},
      build: {
        css: [""],
        js: [
          "https://cdn.staticfile.org/vue/2.6.11/vue.js",
          "https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js",
          "https://cdn.staticfile.org/vuex/3.1.2/vuex.min.js",
          "https://cdn.staticfile.org/axios/0.19.2/axios.min.js"
        ]
      }
    };


    // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
    config.plugin("html").tap(args => {
      args[0].cdn = cdn.build;
      return args;
    });
  },
  devServer: {
    // 让浏览器 overlay 同时显示警告和错误
    overlay: {
      warnings: true,
      errors: true
    },
    disableHostCheck: true,
    open: true,
    // host: "localhost",
    host: "0.0.0.0",
    port: "7080",
    https: false,
    hotOnly: true,
    // public: 'http://192.168.0.164:7080/'  // 本地ip
    // public: 'http://192.168.8.113:7080/',  // 本地ip
    // proxy: {
    //   //配置自动启动浏览器
    //   "/api": {
    //     target: "https://www.dccjyuyue.com/",
    //     secure: false,  // 如果是https接口，需要配置这个参数
    //     changeOrigin: true,  //是否跨域
    //     pathRewrite: {
    //       '^/api': '/' // 这种接口配置出来     http://XX.XX.XX.XX:8083/login
    //     }
    //   }
    // }
  }
};