PrivateProject/王凯私活/TsxVueClassApi/vue.config.js

/*
 * Copyright (c) 2024. bmy
 * Email：2271608011@qq.com
 * Github：https://github.com/helpcode
 */

const isProduction = process.env.NODE_ENV === 'production';
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
const CompressionPlugin = require('compression-webpack-plugin')
const path = require('path');
const {ProgressPlugin} = require("webpack")
const {readFileSync} = require("fs")
const chalk = require("chalk");
const log = require('single-line-log').stdout;
let progress = 0

let js = [
  './lib/vue.min.js',
  './lib/vuex.min.js',
  './lib/vue-router.min.js',
  './lib/axios.min.js',
  './lib/index.min.js',
  './lib/echarts.min.js',
  './lib/minified.min.js',
  './lib/moment.min.js',
]

let exclude = {
  'vue': 'Vue',
  'vuex': 'Vuex',
  'vue-router': 'VueRouter',
  'axios': 'axios',
  'element-ui': 'ELEMENT',
  'echarts': 'echarts',
  'core-js': 'core-js',
  "moment": "moment"
}

module.exports = {
  publicPath: './',
  filenameHashing: true,
  productionSourceMap: false,
  parallel: require('os').cpus().length > 1,
  lintOnSave: false,
  pluginOptions: {
    route: {
      // 默认：page。存放Vue路由页面的文件夹名称
      TemplateFolderName: 'page',
      // 默认：./src/application。从src/开始到TemplateFolderName文件夹父一级文件夹相对路径
      RootFolderName: './src/application',
      // 默认 src/core/config/route.config.ts。生成的配置文件保存路径，相对插件的位置来。
      SaveConfigPath: '../../../src/core/config/route.config.ts'
    }
  },
  devServer: {
    open: ['/#/home'],
    hot: true,
    port: 8080,
    compress: true,
    progress: false,
    overlay: {
      warnings: false,
      errors: true
    },
    before: (app, server) => {
      app.use('/__progress', (_res, res) => res.json({progress}));
      app.get('/', (_req, res, next) => {
        if (progress < 1) {
          res.set('Content-Type', 'text/html');
          const html = readFileSync(path.resolve(__dirname, './bin/start-page.html'), {encoding: 'utf-8'});
          res.send(html);
        } else {
          next();
        }
      });
    }
    // proxy: {
    //   '/api': {
    //     target: 'http://8.140.20.241:8080',
    //     changeOrigin: true,
    //     ws: true,
    //     pathRewrite: {
    //       '^/api': ''
    //     }
    //   }
    // }
  },
  configureWebpack: config => {
    // 设置程序核心入口
    config.entry.app = ['babel-polyfill', './src/core/run/init.run.ts'];

    if (process.env.NODE_ENV === 'production') {
      // 需要被打包排除的插件列表
      config.externals = exclude

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

      // 开启 Gzip压缩
      return {
        plugins: [
          // new BundleAnalyzerPlugin(),
          // new CompressionPlugin({
          //   test: /\.js$|\.html$|\.css/, //匹配文件名
          //   threshold: 10240, //对超过10k的数据进行压缩
          //   deleteOriginalAssets: false //是否删除原文件
          // })
        ]
      };
    } else {
      return {
        plugins: [
          new ProgressPlugin({
            handler: (percentage, message, ...args) => {
              progress = percentage
              log(`\n${chalk.yellow("构建进度:")} ${chalk.green.bold(~~(percentage * 100) + "%")} ${chalk.yellow("模块进度:")} ${args[0] ? chalk.white(args[0]) : "无"}`);
            },
          })
        ]
      }
    }
  },
  chainWebpack: (config) => {
    if (isProduction) {

      // 生产环境下注入一个变量cdn 变量可以在html中通过htmlWebpackPlugin.options进行获取
      config.plugin('html')
        .tap(args => {
          args[0].cdn = js;
          return args;
        })

      // 去除混淆加密
      config.optimization.minimize(false)

      // 移除 prefetch，preload 插件 减少不必要的请求
      config.plugins.delete('prefetch')
      config.plugins.delete('preload')
    }


    /**
     * 配置路径别名，项目中引用资源的时候路径可以更简短
     * 但是ts文件在用的时候，编译器会报错，需要添加 @ts-ignore
     * 忽略开发工具的错误。
     */
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@core', resolve('src/core'))
      .set('@router', resolve('src/core/router'))
      .set('@store', resolve('src/core/store'))
      .set('@type', resolve('src/core/types'))
      .set('@config', resolve('src/core/config'))
      .set('@utils', resolve('src/core/utils'))
      .set('@run', resolve('src/core/run'))
      .set('@ann', resolve('src/core/annotation'))
      .set('@model', resolve('src/core/model'))
      .set('@dao', resolve('src/core/dao'))
      .set('@entity', resolve('src/core/entity'))
      .set('@service', resolve('src/core/service'))
      .set('@impl', resolve('src/core/service/impl'))

      .set('@application', resolve('src/application'))
      .set('@img', resolve('src/application/assets/img'))
      .set('@less', resolve('src/application/assets/less'))
      .set('@pageLess', resolve('src/application/assets/less/page'))
      .set('@componentsLess', resolve('src/application/assets/less/components'))
      .set('@components', resolve('src/application/components'))
      .set('@page', resolve('src/application/page'))
      .set('@logic', resolve('src/application/logic'))
      .set('@container', resolve('src/application/container'))
  }

};

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