/*
 * @Description: vue配置文件
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-11-22 16:44:07
 * @LastEditors: lhl
 * @LastEditTime: 2021-08-22 11:36:55
 */
const path = require("path");
//引入该插件
const CompressionWebpackPlugin = require("compression-webpack-plugin");
//匹配此 {RegExp} 的资源
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
// 打包分析插件
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

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

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/", // 部署应用包时的基本 URL
  outputDir: "dist",
  outputDir: "dist/static",
  // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  parallel: false,
  lintOnSave: false, // 代码格式校验
  productionSourceMap: process.env.NODE_ENV === "production" ? true : false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
  devServer: {
    host: "0.0.0.0", // 允许外部ip访问 0.0.0.0
    open: true, //设置自动打开浏览器
    port: 8989, //设置端口
    compress: true,
    disableHostCheck: true, //webpack4.0 开启热更新
    proxy: {
      //设置代理
      "/api": {
        target: "http://197s740a66.iok.la", // 接口的域名
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        secure: false, // 如果是https接口，需要配置这个参数
        pathRewrite: {
          // 如果接口本身没有/api需要通过pathRewrite来重写接口地址
          "^/api": "",
        },
      },
    },
  },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("autoprefixer")({
            // 配置使用 autoprefixer
            overrideBrowserslist: ["last 15 versions"],
          }),
          require("postcss-pxtorem")({
            rootValue: 100, // 换算的基数 75
            // 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI，也会被转化。目前我使用 selectorBlackList字段，来过滤
            //如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
            selectorBlackList: [".van"], // 过滤掉.van-开头的class，不进行rem转换
            propList: ["*"],
            // exclude: /node_modules/
          }),
        ],
      },
      // 使用 less 全局变量
      less: {
        javascriptEnabled: true,
      },
      // 若是使用scss scss全局变量文件丢这里若还报错 建议降级loader版本即可
      // scss: {
      //      // @是src的别名
      //     data: `@import "@/assets/style/variables.scss";`
      // }
    },
  },
  // 使用 less 全局变量 配置
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/assets/style/variables.less")], // 引入全局样式变量
    },
  },
  // 分包
  configureWebpack: (config) => {
    config.optimization = {
      splitChunks: {
        chunks: "all",
        cacheGroups: {
          vant: {
            name: "vant",
            test: /[\\/]node_modules[\\/]vant[\\/]/,
            priority: -10,
          },
          vendors: {
            name: "vendors",
            test: /[\\/]node_modules[\\/]/,
            priority: -20,
          },
        },
      },
    };
    // gzip压缩
    if (process.env.NODE_ENV === "production") {
      // 打包分析插件
      config.plugins.push(new BundleAnalyzerPlugin());
      // start 生成 gzip 压缩文件
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]", //目标资源名称
          algorithm: "gzip",
          test: productionGzipExtensions, //处理所有匹配此 {RegExp} 的资源
          threshold: 10240, // 只处理比这个值大的资源。按字节计算(楼主设置10K以上进行压缩)
          minRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理
          deleteOriginalAssets: true, //是否删除原资源
        })
      );
    }
  },
  chainWebpack: (config) => {
    // 配置别名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("Assets", resolve("src/assets"))
      .set("Utils", resolve("src/utils"))
      .set("Components", resolve("src/components"));

    // 去除生产环境console
    config.optimization.minimizer("terser").tap((args) => {
      args[0].terserOptions.compress.drop_console = true;
      return args;
    });
  },
};