DataOps-web/vue.config.js

'use strict'
const { defineConfig } = require('@vue/cli-service')
const WriteFilePlugin = require('write-file-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const fs = require('fs')
// 配置编辑器
const Timestamp = new Date().getTime()

// if (process.env.NODE_ENV === 'production') {
//   fs.writeFile('./public/version.json', JSON.stringify({ version: Timestamp }), () => {
//     console.log('新版本号生成成功')
//   })
// }
module.exports = defineConfig({
  // 项目部署的基本路径，默认 '/'
  publicPath: '/',
  assetsDir: 'static',
  // 项目打包是否生成js的 source map 调试包，默认 true，生产部署设置为false
  productionSourceMap: process.env.NODE_ENV !== 'production',
  // devServer 支持 webpack-dev-server 所有选项
  devServer: {
    open: true,
    // host: 'localhost',
    port: 18183,
    hot: true,
    // https: false,
    proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_API,
        secure: false, // 是否支持 https，默认 false
        changeOrigin: true, // 是否支持跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  configureWebpack: config => {
    config.devtool = 'source-map'
    // 代码拆分
    config.optimization.splitChunks.chunks = 'all'
    config.output.filename = `static/js/[name].${Timestamp}.js`
    config.output.chunkFilename = `static/js/[name].${Timestamp}.js`

    config.module.rules.push(
      {
        test: /\.geojson$/,
        loader: 'json-loader',
        type: 'javascript/auto'
      },
      // 其他加载器规则...
      {
        test: /\.jade$/,
        loader: 'jade'
      },
      {
        test: /\.pug$/,
        loader: 'pug-plain-loader'
      })
    config.plugins.push(
      new WriteFilePlugin({
        test: /version\.json$/,
        useHashIndex: true
      })
    )
    if (process.env.NODE_ENV === 'production') {
      // 压缩 JS 文件
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_console: true,
              drop_debugger: true
            },
            output: {
              comments: false
            }
          },
          sourceMap: false,
          parallel: true
        }))
    }
  },
  chainWebpack: config => {
    config.when(process.env.NODE_ENV !== 'development', config => {
      config.optimization.minimizer('terser').tap(options => {
        options[0].terserOptions.compress.drop_console = true
        options[0].terserOptions.output = {
          comments: false
        }
        return options
      })
    })
    config.plugin('generate-version-file').use({
      apply: (compiler) => {
        // 生成当前时间戳
        // const timestamp = Date.now()

        // 构造 version.json 内容

        const versionData = {
          version: Timestamp
        }

        // 写入 version.json 文件
        if (process.env.NODE_ENV === 'production') {
          fs.writeFileSync('./public/version.json', JSON.stringify(versionData, null, 2))
        }
      }
    })
    // config.output.chunkFilename('js/[name].[contenthash].js').end()
  },
  // babel-loader 是否处理 node_modules 中的依赖包，处理哪些依赖包，参数类型: boolean | Array<string | RegExp>
  transpileDependencies: [
    '@vue-office/excel',
    'vue-demi',
    '@vue-office',
    'xlsx',
    'exceljs',
    'html2canvas',
    '@handsontable',
    '@handsontable/vue',
    'handsontable',
    'handsontable/registry',
    'js-base64',
    'vis-network',
    'vuetify',
    'axios'
  ]
})