vue.config.js_学习之路

const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 缩小JavaScript
const OptimizeCssnanoPlugin = require("@intervolga/optimize-cssnano-plugin"); // 压缩和去重css样式文件
const path = require("path");

const isProd =
  process.env.VUE_APP_FLAG === "production" ||
  process.env.VUE_APP_FLAG === "prod"; // 是否为生产环境

const name = process.env.VUE_APP_TITLE || "clean-front"; // 网页标题

var plugins = [
  new OptimizeCssnanoPlugin({
    sourceMap: false,
    cssnanoOptions: {
      preset: [
        "default",
        {
          mergeLonghand: false,
          cssDeclarationSorter: false,
        },
      ],
    },
  }),
];
console.log("================================isProd", isProd);

if (isProd) {
  plugins.unshift(
    new UglifyJsPlugin({
      uglifyOptions: { // uglify选项
        compress: { // 其他压缩选项
          drop_debugger: true,
          drop_console: true,
        },
      },
      sourceMap: false, // 使用 source map 将错误信息的位置映射到模块
      parallel: true, // 使用多进程并行运行来提高构建速度
    })
  );
}

const publicPathObj = {
  development: "/",
  test: "***",
  production:
    "***",
};

console.log("process.env.VUE_APP_FLAG]: ", process.env.VUE_APP_FLAG);
module.exports = {
  publicPath: publicPathObj[process.env.VUE_APP_FLAG], // 如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
  outputDir: isProd ? "target/prod" : "target/test", // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录
  assetsDir: "static", // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  configureWebpack: { // webpack配置
    name: name, // 网页title 在html里进行设置
    devtool: // 此选项控制是否生成，以及如何生成 source map。
      process.env.VUE_APP_FLAG != "development" ? false : "eval-source-map",
    resolve: { // 解析
      alias: { // 创建 import 或 require 的别名，来确保模块引入变得更简单。
        "@": path.join(__dirname, "src"),
        "~": path.join(__dirname),
      },
    },
    plugins: plugins, // 插件
    optimization: { // 优化
      splitChunks: { // 动态导入模块 分离chunk
        cacheGroups: { // 缓存组可以继承和/或覆盖来自 splitChunks.* 的任何选项
          common: {
            //commons 一般是是个人定义的
            name: "chunk-common", // 打包后的文件名
            chunks: "initial",
            minChunks: 1,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 1,
            reuseExistingChunk: true,
          },
          vendors: {
            //vendor 是导入的 npm 包
            name: "chunk-vendors",
            test: /[\\/]node_modules[\\/]/,
            chunks: "initial",
            maxSize: 600000,
            maxInitialRequests: 20,
            priority: 2,
            reuseExistingChunk: true,
            enforce: true,
          },
          antDesignVue: {
            //把antDesignVue从chunk-vendors.js提取出来。当然我们也可以把mixins，vue.min.js等等也按照类似配置提取出来
            name: "chunk-ant-design-vue",
            test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
            chunks: "initial",
            priority: 3,
            maxSize: 600000,
            reuseExistingChunk: true,
            enforce: true,
          },
          styles: {
            name: "styles",
            test: /\.css$/,
            chunks: "all",
            enforce: true,
          },
        },
      },
    },
    devServer: {
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
    },
  },
  devServer: {
    open: true,
    port: 8080,
    host: "0.0.0.0",
    https: false,
    hotOnly: true,
    disableHostCheck: true,
    proxy: {
      "/api": {
        target:
          "https://www.fastmock.site/mock/08e002ebed3dde51cdd5e7a73071b386/mockApi",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": "/",
        },
      },
    },
  },
};